<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IT4IT业务模型与架构拣选系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 14px;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 优化后的上下布局结构 */
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            padding: 10px;
            gap: 15px;
        }
        
        /* 顶部导航区域 - 紧凑化设计 */
        .top-nav {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }
        
        .nav-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .nav-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .nav-toggle {
            display: flex;
            gap: 10px;
        }
        
        .toggle-btn {
            padding: 6px 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
        }
        
        .toggle-btn:hover {
            background: #2980b9;
        }
        
        .toggle-btn.active {
            background: #2980b9;
        }
        
        /* 可折叠的导航内容区域 */
        .nav-content {
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .nav-content.collapsed {
            max-height: 0;
        }
        
        .nav-content.expanded {
            max-height: 800px;
        }
        
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        
        .nav-section {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
        
        .nav-section-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #3498db;
            font-size: 13px;
        }
        
        .nav-section-content {
            font-size: 12px;
            color: #666;
            line-height: 1.5;
        }
        
        /* 主内容区域 */
        .main-content {
            flex: 1;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }
        
        .panel-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eaeaea;
            color: #2c3e50;
        }
        
        /* 原有的左侧面板内容现在放在导航区域 */
        .demand-info {
            margin-bottom: 15px;
        }
        
        .demand-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #3498db;
            font-size: 13px;
        }
        
        .demand-desc {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
            font-size: 12px;
            line-height: 1.4;
        }
        
        /* 附件清单样式 - 紧凑化 */
        .attachment-list {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .attachment-item:last-child {
            border-bottom: none;
        }
        
        .attachment-name {
            flex: 1;
            color: #2c3e50;
            font-size: 12px;
        }
        
        .attachment-meta {
            flex: 0 0 100px;
            color: #666;
            text-align: right;
            margin-right: 10px;
            font-size: 11px;
        }
        
        .attachment-actions {
            display: flex;
            gap: 4px;
        }
        
        .btn-attachment {
            padding: 4px 8px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 10px;
            transition: background 0.3s;
        }
        
        .btn-attachment:hover {
            background: #2980b9;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 5px;
                gap: 10px;
            }
            
            .top-nav {
                padding: 10px;
            }
            
            .nav-header {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }
            
            .nav-toggle {
                width: 100%;
                justify-content: space-between;
            }
            
            .nav-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            
            .main-content {
                padding: 15px;
            }
            
            .toggle-btn {
                flex: 1;
                text-align: center;
            }
        }
        
        @media (max-width: 480px) {
            .nav-toggle {
                flex-direction: column;
                gap: 5px;
            }
            
            .toggle-btn {
                width: 100%;
            }
            
            .attachment-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .attachment-actions {
                align-self: flex-end;
            }
        }
        
        /* 非功能需求评估模块样式 */
        .nfr-assessment-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #eaeaea;
        }
        
        .nfr-table-container {
            overflow-x: auto;
            margin-top: 15px;
        }
        
        .nfr-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            background: white;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .nfr-table th {
            background: #3498db;
            color: white;
            padding: 12px 15px;
            text-align: left;
            font-weight: bold;
            border-bottom: 2px solid #2980b9;
        }
        
        .nfr-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
        }
        
        .nfr-table tr:last-child td {
            border-bottom: none;
        }
        
        .nfr-table tr:nth-child(even) {
            background: #f9f9f9;
        }
        
        .nfr-table tr:hover {
            background: #f1f8ff;
        }
        
        .attention-cell {
            text-align: center;
        }
        
        .attention-select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            font-size: 13px;
        }
        
        .attention-select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .nfr-table tr.attention-highlight {
            background-color: #fff9c4 !important;
        }
        
        .nfr-table tr.attention-highlight:hover {
            background-color: #fff59d !important;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .attachment-item:last-child {
            border-bottom: none;
        }
        
        .attachment-name {
            flex: 1;
            color: #2c3e50;
        }
        
        .attachment-meta {
            flex: 0 0 150px;
            color: #666;
            text-align: right;
            margin-right: 15px;
        }
        
        .attachment-actions {
            display: flex;
            gap: 5px;
        }
        
        .btn-attachment {
            padding: 5px 5px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            transition: background 0.3s;
        }
        
        .btn-attachment:hover {
            background: #2980b9;
        }
        
        /* 选项卡样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 15px;
        }
        
        .tab {
            padding: 10px 16px;
            cursor: pointer;
            background: #f8f9fa;
            border: 1px solid transparent;
            border-bottom: none;
            border-radius: 6px 6px 0 0;
            margin-right: 3px;
            transition: all 0.3s;
        }
        
        .tab:hover {
            background: #e9ecef;
        }
        
        .tab.active {
            background: #3498db;
            color: white;
            border-color: #2980b9;
            border-bottom: 1px solid #3498db;
            margin-bottom: -1px;
        }
        
        /* 数据架构制品样式 */
        .data-artifacts-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        
        .data-artifact-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        .data-artifact-header {
            padding: 15px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .data-artifact-title {
            font-size: 14px;
            font-weight: 600;
            color: #1a237e;
        }
        
        .data-artifact-badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            background: #e8f5e9;
            color: #2e7d32;
        }
        
        .data-artifact-content {
            padding: 20px;
        }
        
        .data-artifact-description {
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
        }
        
        /* 图表容器 */
        .data-chart-container {
            width: 100%;
            background: #fafbfc;
            border: 1px solid #eee;
            border-radius: 6px;
            margin-bottom: 15px;
            overflow: auto;
        }
        
        .data-chart {
            padding: 15px;
            min-height: 300px;
            display: flex;
            flex-direction: column;
        }
        
        /* 表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        
        .data-table th {
            background: #e3f2fd;
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
            font-weight: 600;
        }
        
        .data-table td {
            padding: 8px 10px;
            border: 1px solid #ddd;
        }
        
        .data-table tr:nth-child(even) {
            background: #f9f9f9;
        }
        
        /* 矩阵样式 */
        .data-matrix {
            display: grid;
            gap: 1px;
            background: #ddd;
            border: 1px solid #ddd;
            margin-bottom: 15px;
            overflow-x: auto;
        }
        
        .data-matrix-cell {
            background: white;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            min-width: 80px;
        }
        
        .data-matrix-header {
            background: #e3f2fd;
            font-weight: 600;
        }
        
        .data-matrix-corner {
            background: #1a237e;
            color: white;
            font-weight: 600;
        }
        
        /* 实体图样式 */
        .data-entity-diagram {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            padding: 20px;
        }
        
        .data-entity-box {
            width: 150px;
            padding: 12px;
            background: #e3f2fd;
            border-radius: 6px;
            border: 1px solid #90caf9;
            text-align: center;
        }
        
        .data-entity-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: #1a237e;
        }
        
        .data-entity-attr {
            font-size: 11px;
            color: #555;
            margin-bottom: 3px;
        }
        
        .data-relationship {
            width: 100%;
            height: 2px;
            background: #90caf9;
            margin: 10px 0;
            position: relative;
        }
        
        .data-relationship:after {
            content: '';
            position: absolute;
            right: 0;
            top: -4px;
            width: 0;
            height: 0;
            border-left: 8px solid #90caf9;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
        
        /* 数据流图 */
        .data-flow {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        .data-flow-node {
            width: 120px;
            padding: 10px;
            background: #e8f5e9;
            border-radius: 6px;
            border: 1px solid #a5d6a7;
            text-align: center;
            margin: 10px;
            font-size: 12px;
        }
        
        .data-flow-arrow {
            width: 2px;
            height: 20px;
            background: #4caf50;
            margin: 0 auto;
            position: relative;
        }
        
        .data-flow-arrow:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: -4px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 10px solid #4caf50;
        }
        
        /* 生命周期图 */
        .data-lifecycle {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .data-lifecycle-stage {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 10px;
        }
        
        .data-stage-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #e3f2fd;
            border: 2px solid #1a237e;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 600;
            color: #1a237e;
        }
        
        .data-stage-arrow {
            width: 30px;
            height: 2px;
            background: #1a237e;
            position: relative;
        }
        
        .data-stage-arrow:after {
            content: '';
            position: absolute;
            right: -5px;
            top: -4px;
            width: 0;
            height: 0;
            border-left: 8px solid #1a237e;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
        
        /* 图例说明 */
        .data-legend {
            margin-top: 10px;
            font-size: 11px;
            color: #666;
        }
        
        .data-legend strong {
            font-weight: 600;
        }
        
        /* 数据架构新增样式结束 */
        
        /* 任务详情模态对话框样式 */
        .task-detail-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .task-detail-modal.active {
            display: flex;
        }
        
        .task-detail-content {
            background: white;
            border-radius: 8px;
            padding: 25px;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .task-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }
        
        .task-detail-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .task-detail-close {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .task-detail-close:hover {
            background: #c0392b;
        }
        
        .task-detail-section {
            margin-bottom: 25px;
        }
        
        .task-detail-section-title {
            font-size: 16px;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .task-steps-list {
            list-style: none;
            padding: 0;
        }
        
        .task-step-item {
            background: #f8f9fa;
            border: 1px solid #eaeaea;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }
        
        .task-step-item:hover {
            background: #e9ecef;
            border-color: #3498db;
        }
        
        .task-step-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        
        .task-step-title {
            font-weight: bold;
            color: #2c3e50;
            font-size: 14px;
        }
        
        .task-step-role {
            background: #3498db;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
        }
        
        .task-step-url {
            margin: 8px 0;
        }
        
        .task-step-url a {
            color: #3498db;
            text-decoration: none;
            font-size: 13px;
            word-break: break-all;
        }
        
        .task-step-url a:hover {
            text-decoration: underline;
        }
        
        .task-cpcp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        
        .task-cpcp-item {
            background: #f1f8ff;
            border: 1px solid #3498db;
            border-radius: 6px;
            padding: 12px;
        }
        
        .task-cpcp-label {
            font-weight: bold;
            color: #3498db;
            font-size: 12px;
            margin-bottom: 5px;
        }
        
        .task-cpcp-value {
            color: #2c3e50;
            font-size: 13px;
            line-height: 1.4;
        }
        
        /* CPCP标签样式优化 */
        .cpcp-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            margin-right: 4px;
            margin-bottom: 4px;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }
        
        .cpcp-badge:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        
        .task-step-cpcp {
            margin-top: 8px;
            margin-bottom: 4px;
            padding: 8px;
            background: #fafbfc;
            border-radius: 4px;
            border-left: 3px solid #e9ecef;
        }
        
        .cpcp-label-text {
            font-size: 11px;
            color: #666;
            margin-right: 6px;
            font-weight: 500;
        }
        
        /* 智能助手推荐模态对话框样式 */
        .ai-recommendation-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .ai-recommendation-modal.active {
            display: flex;
        }
        
        .ai-recommendation-content {
            background: white;
            border-radius: 12px;
            padding: 25px;
            max-width: 1000px;
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            margin: 20px;
        }
        
        .ai-recommendation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #28a745;
        }
        
        .ai-recommendation-title {
            font-size: 20px;
            font-weight: bold;
            color: #28a745;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .ai-recommendation-close {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .ai-recommendation-close:hover {
            background: #c0392b;
        }
        
        .architecture-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .architecture-card {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .architecture-card:hover {
            border-color: #28a745;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.1);
        }
        
        .architecture-card-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            gap: 10px;
        }
        
        .architecture-icon {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }
        
        .business-icon { background: #007bff; }
        .application-icon { background: #6f42c1; }
        .data-icon { background: #20c997; }
        .technology-icon { background: #fd7e14; }
        .security-icon { background: #dc3545; }
        
        .architecture-card-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .architecture-recommendations {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .recommendation-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            transition: all 0.3s ease;
        }
        
        .recommendation-item:hover {
            border-color: #28a745;
            background: #f8fff9;
        }
        
        .recommendation-icon {
            color: #28a745;
            font-size: 14px;
            margin-top: 2px;
        }
        
        .recommendation-text {
            flex: 1;
            font-size: 13px;
            color: #495057;
            line-height: 1.4;
        }
        
        .ai-recommendation-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }
        
        .ai-action-btn {
            padding: 10px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .ai-accept-btn {
            background: #28a745;
            color: white;
        }
        
        .ai-accept-btn:hover {
            background: #218838;
        }
        
        .ai-reject-btn {
            background: #6c757d;
            color: white;
        }
        
        .ai-reject-btn:hover {
            background: #545b62;
        }
        
        .ai-info-banner {
            background: #e8f4fd;
            border: 1px solid #bee5eb;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .ai-info-icon {
            color: #17a2b8;
            font-size: 16px;
            margin-top: 2px;
        }
        
        .ai-info-text {
            font-size: 13px;
            color: #0c5460;
            line-height: 1.5;
        }
        
        /* 架构组件选择样式 */
        .component-selection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }
        
        .component-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .component-item:hover {
            border-color: #28a745;
            background: #f8fff9;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
        }
        
        .component-item.selected {
            border-color: #28a745;
            background: #e8f5e9;
            box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
        }
        
        .component-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid #28a745;
            border-radius: 3px;
            position: relative;
            flex-shrink: 0;
            background: white;
            transition: all 0.3s ease;
        }
        
        .component-checkbox.checked {
            background: #28a745;
        }
        
        .component-checkbox.checked::after {
            content: '✓';
            position: absolute;
            color: white;
            font-size: 12px;
            font-weight: bold;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .component-info {
            flex: 1;
        }
        
        .component-name {
            font-weight: 600;
            color: #2c3e50;
            font-size: 13px;
            margin-bottom: 2px;
        }
        
        .component-type {
            font-size: 11px;
            color: #6c757d;
            background: #f8f9fa;
            padding: 2px 6px;
            border-radius: 3px;
            display: inline-block;
        }
        
        .architecture-summary {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 15px;
        }
        
        .summary-title {
            font-weight: 600;
            color: #495057;
            font-size: 13px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .selection-count {
            background: #28a745;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .select-all-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: auto;
        }
        
        .select-all-btn:hover {
            background: #495057;
        }
        
        /* 折叠/展开功能样式 */
        .collapsible-section {
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .collapsible-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #dee2e6;
            transition: all 0.3s ease;
            user-select: none;
        }
        
        .collapsible-header:hover {
            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        }
        
        .collapsible-header.collapsed {
            border-bottom: none;
        }
        
        .collapsible-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin: 0;
        }
        
        .collapsible-summary {
            font-size: 13px;
            color: #6c757d;
            margin: 5px 0 0 30px;
        }
        
        .collapsible-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #495057;
            font-weight: 500;
        }
        
        .toggle-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            transition: all 0.3s ease;
        }
        
        .toggle-icon.collapsed {
            transform: rotate(-90deg);
            background: #6c757d;
        }
        
        .collapsible-content {
            padding: 20px;
            background: white;
            max-height: 2000px;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        
        .collapsible-content.collapsed {
            max-height: 0;
            padding: 0 20px;
            opacity: 0;
        }
        
        .section-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
            flex-shrink: 0;
        }
        
        .review-overview-icon {
            background: #28a745;
        }
        
        .review-final-icon {
            background: #007bff;
        }
        
        .review-first-icon {
            background: #fd7e14;
        }
        
        .review-decision-icon {
            background: #6f42c1;
        }
        
        .review-workload-icon {
            background: #e83e8c;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .ai-recommendation-content {
                margin: 10px;
                padding: 20px;
                max-height: 95vh;
            }
            
            .architecture-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .ai-recommendation-actions {
                flex-direction: column;
            }
            
            .ai-action-btn {
                width: 100%;
                justify-content: center;
            }
        }
        
        /* 解决方案文档模态对话框样式 */
        .solution-doc-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .solution-doc-modal.active {
            display: flex;
        }
        
        .solution-doc-content {
            background: white;
            border-radius: 10px;
            padding: 30px;
            max-width: 900px;
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }
        
        .solution-doc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #2196f3;
        }
        
        .solution-doc-title {
            font-size: 20px;
            font-weight: bold;
            color: #1565c0;
        }
        
        .solution-doc-close {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .solution-doc-close:hover {
            background: #c0392b;
        }
        
        .solution-doc-section {
            margin-bottom: 30px;
        }
        
        .solution-doc-section-title {
            font-size: 16px;
            font-weight: bold;
            color: #2196f3;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e3f2fd;
            display: flex;
            align-items: center;
        }
        
        .solution-doc-section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: #2196f3;
            margin-right: 10px;
            border-radius: 2px;
        }
        
        /* 需求信息列表样式 */
        .requirement-list {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            border: 1px solid #e9ecef;
        }
        
        .requirement-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }
        
        .requirement-item:hover {
            border-color: #2196f3;
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
        }
        
        .requirement-item:last-child {
            margin-bottom: 0;
        }
        
        .requirement-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .requirement-title {
            font-weight: bold;
            color: #1565c0;
            font-size: 14px;
        }
        
        .requirement-priority {
            background: #ff5722;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            white-space: nowrap;
        }
        
        .requirement-desc {
            color: #666;
            font-size: 13px;
            line-height: 1.4;
        }
        
        /* 5A架构模型清单样式 */
        .model-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px;
        }
        
        .model-card {
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            border: 1px solid #90caf9;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .model-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(33, 150, 243, 0.2);
        }
        
        .model-icon {
            font-size: 24px;
            margin-bottom: 8px;
            color: #1976d2;
        }
        
        .model-name {
            font-weight: bold;
            color: #1565c0;
            margin-bottom: 5px;
            font-size: 14px;
        }
        
        .model-count {
            color: #666;
            font-size: 12px;
        }
        
        /* 模型质量检查统计样式 */
        .quality-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .quality-stat-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .quality-stat-number {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .quality-stat-number.total {
            color: #607d8b;
        }
        
        .quality-stat-number.passed {
            color: #4caf50;
        }
        
        .quality-stat-number.failed {
            color: #f44336;
        }
        
        .quality-stat-number.rate {
            color: #ff9800;
        }
        
        .quality-stat-label {
            color: #666;
            font-size: 12px;
        }
        
        /* 遗留问题清单样式 */
        .quality-issues {
            background: #fef5e7;
            border: 1px solid #ffcc02;
            border-radius: 8px;
            padding: 15px;
        }
        
        .quality-issue-item {
            background: white;
            border: 1px solid #ffe082;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }
        
        .quality-issue-item:hover {
            border-color: #ffc107;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
        }
        
        .quality-issue-item:last-child {
            margin-bottom: 0;
        }
        
        .quality-issue-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .quality-issue-title {
            font-weight: bold;
            color: #f57c00;
            font-size: 14px;
        }
        
        .quality-issue-severity {
            background: #ff9800;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            white-space: nowrap;
        }
        
        .quality-issue-desc {
            color: #666;
            font-size: 13px;
            line-height: 1.4;
        }
        
        /* 批准人信息样式 */
        .approver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .approver-card {
            background: #e8f5e9;
            border: 1px solid #4caf50;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }
        
        .approver-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #4caf50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            margin: 0 auto 10px;
        }
        
        .approver-name {
            font-weight: bold;
            color: #2e7d32;
            margin-bottom: 5px;
        }
        
        .approver-role {
            color: #4caf50;
            font-size: 12px;
            margin-bottom: 8px;
        }
        
        .approver-time {
            color: #666;
            font-size: 11px;
        }

        /* 高亮选择样式 */
        .highlightable {
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .highlightable:hover {
            background-color: #fff9c4;
        }
        
        .highlighted {
            background-color: #ffeb3b !important;
        }
        
        /* 选中的应用组件样式 */
        .selected-component {
            border: 2px solid #e91e63 !important;
            box-shadow: 0 0 10px rgba(233, 30, 99, 0.3);
            z-index: 10;
            transition: all 0.3s ease;
        }
        
        /* 业务对象下拉选择样式 */
        .business-object-select {
            width: 100%;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
        }
        
        .tab-content {
            display: none;
            flex: 1;
            overflow-y: auto;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 业务模型清单样式 */
        .domain-section {
            margin-bottom: 15px;
            border: 1px solid #eaeaea;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .domain-header {
            background: #f1f8ff;
            padding: 12px 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: #2c3e50;
            border-bottom: 1px solid #eaeaea;
        }
        
        .domain-header:hover {
            background: #e3f2fd;
        }
        
        .domain-content {
            display: none;
            padding: 15px;
            background: white;
        }
        
        .domain-content.expanded {
            display: block;
        }
        
        .activity-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-checkbox {
            margin-right: 10px;
        }
        
        .activity-name {
            flex: 1;
        }
        
        .activity-id {
            color: #7f8c8d;
            font-size: 11px;
            margin-left: 10px;
        }
        
        /* 工作流按钮样式 */
        .workflow-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
            margin-left: 10px;
        }
        
        .workflow-btn:hover {
            background-color: #2980b9;
        }
        
        /* 工作流图表容器样式 */
        .workflow-chart-container {
            display: none;
            margin: 10px 0 15px 40px;
            padding: 15px;
            background-color: #f8f9fa;
            border: 1px solid #eaeaea;
            border-radius: 6px;
            max-width: 100%;
            overflow-x: auto;
        }
        
        .workflow-chart-container.show {
            display: block;
        }
        
        /* BPMN泳道图样式 */
        .bpmn-diagram {
            border: 1px solid #ddd;
            border-collapse: collapse;
            width: 100%;
            min-width: 800px;
        }
        
        .bpmn-diagram th {
            background-color: #3498db;
            color: white;
            padding: 8px;
            text-align: center;
            border: 1px solid #ddd;
            font-weight: bold;
        }
        
        .bpmn-diagram td {
            padding: 10px;
            border: 1px solid #ddd;
            vertical-align: top;
            min-height: 60px;
            position: relative;
        }
        
        .phase-column {
            background-color: #f1f8ff;
            font-weight: bold;
            text-align: center;
            width: 120px;
        }
        
        /* BPMN元素样式 */
        .bpmn-task {
            background-color: #e3f2fd;
            border: 1px solid #90caf9;
            border-radius: 4px;
            padding: 8px;
            margin: 5px 0;
            text-align: center;
            font-size: 12px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .bpmn-task:hover {
            background-color: #bbdefb;
            border-color: #64b5f6;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .bpmn-gateway {
            width: 40px;
            height: 40px;
            background-color: #fff3e0;
            border: 1px solid #ffb74d;
            border-radius: 4px;
            margin: 5px auto;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 11px;
        }
        
        .bpmn-event {
            width: 40px;
            height: 40px;
            background-color: #e8f5e9;
            border: 1px solid #a5d6a7;
            border-radius: 50%;
            margin: 5px auto;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }
        
        .bpmn-text {
            text-align: center;
            font-size: 11px;
            margin: 5px 0;
            color: #333;
        }
        
        /* 连接线样式 */
        .connection-line {
            position: absolute;
            background-color: #34495e;
            z-index: -1;
        }
        
        .connection-horizontal {
            height: 2px;
            width: 100%;
            top: 50%;
            left: 0;
        }
        
        .connection-vertical {
            width: 2px;
            height: 100%;
            left: 50%;
            top: 0;
        }
        
        /* 架构图样式 */
        .architecture-content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .architecture-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .architecture-diagram {
            /** flex: 1; **/
            background: #f8f9fa;
            border: 1px dashed #ccc;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            min-height: 300px;
        }
        
        .architecture-notes {
            margin-top: 15px;
        }
        
        .notes-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .notes-textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            resize: vertical;
            font-size: 13px;
        }
        
        .notes-textarea:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .submit-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 20px;
            align-self: flex-end;
            transition: background 0.3s;
        }
        
        .submit-btn:hover {
            background: #2980b9;
        }
        
        .selected-count {
            margin-top: 10px;
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .arrow {
            transition: transform 0.3s;
        }
        
        .arrow.expanded {
            transform: rotate(180deg);
        }
        
        .architecture-filter {
            margin-bottom: 15px;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .filter-select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        
        /* 分层架构图样式 */
        .layered-architecture {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 20px;
            gap: 2px;
        }
        
        .architecture-layer {
            display: flex;
            flex-direction: column;
            gap: 1px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 2px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .layer-title {
            background: #3498db;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }
        
        .layer-components {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 15px;
            margin-top: 10px;
        }
        
        .component {
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px 16px;
            text-align: center;
            min-width: 100px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .component:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .component.selected {
            background: #3498db;
            color: white;
            border-color: #2980b9;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }
        
        .component.group {
            border: 2px solid #3498db;
            min-width: 200px;
        }
        
        .component.group.selected {
            border-color: #2980b9;
        }
        
        .sub-components {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 8px;
        }
        
        .sub-component {
            background: #f8f9fa;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .sub-component:hover {
            background: #e9ecef;
        }
        
        .sub-component.selected {
            background: #3498db;
            color: white;
            border-color: #2980b9;
        }
        
        .layer-connector {
            width: 2px;
            background: #ddd;
            margin: 0 auto;
            height: 2px;
            position: relative;
            top: 0;
        }
        
        /* 业务组件样式 */
        .business-components {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
        
        .business-component-group {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            width: 100%;
        }
        
        .business-component-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 2px solid #3498db;
        }
        
        .business-component-items {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        /* 树型结构样式 */
        .tree-node {
            position: relative;
            flex: 1;
            min-width: 300px;
        }
        
        .tree-node-content {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            background: #f8f9fa;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .tree-node-content:hover {
            background: #e9ecef;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        
        .tree-node-content.selected {
            background: #ffeb3b;
            color: #333;
            border-color: #ffc107;
            box-shadow: 0 2px 8px rgba(255, 235, 59, 0.3);
        }
        
        .toggle-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 8px;
            transition: transform 0.3s ease;
            color: #7f8c8d;
        }
        
        .toggle-icon.expanded {
            transform: rotate(90deg);
        }
        
        .tree-children {
            margin-left: 30px;
            margin-top: 8px;
            display: none;
        }
        
        .tree-children.expanded {
            display: block;
        }
        
        /* 清单样式 */
        .business-component {
            font-weight: bold;
        }
        
        .component-list {
            margin-top: 10px;
            margin-left: 20px;
        }
        
        .list-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
            font-size: 13px;
        }
        
        .list-items {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }
        
        .list-item {
            padding: 4px 8px;
            background-color: #e3f2fd;
            border: 1px solid #90caf9;
            border-radius: 3px;
            font-size: 12px;
            color: #1565c0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .list-item:hover {
            background-color: #bbdefb;
            transform: translateY(-1px);
        }
        
        .list-item.selected {
            background: #ffeb3b;
            color: #333;
            border-color: #ffc107;
        }
        
        /* 产品模型样式 */
        .product-model {
            width: 100%;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .model-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #3498db;
        }
        
        .product-table {
            width: 100%;
            overflow-x: auto;
        }
        
        .product-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .product-table th {
            background: #f8f9fa;
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .product-table td {
            border: 1px solid #ddd;
            padding: 10px 12px;
            vertical-align: middle;
        }
        
        .product-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .product-table tr:hover {
            background-color: #f1f1f1;
        }
        
        .category-cell {
            font-weight: bold;
            background: #e3f2fd !important;
            color: #1565c0;
            text-align: center;
            vertical-align: middle;
        }
        
        .product-item {
            display: inline-block;
            padding: 6px 12px;
            background: #e3f2fd;
            border: 1px solid #90caf9;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .product-item:hover {
            background: #bbdefb;
        }
        
        .product-item.selected {
            background: #ffeb3b;
            color: #333;
            border-color: #ffc107;
        }
        
        /* 应用上下文关系图样式 - 垂直布局 */
        .application-context-diagram {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
            min-height: 400px;
            padding: 20px;
            background: #f8f9fa;
            position: relative;
        }
        
        .context-section {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            min-width: 180px;
            display: flex;
            flex-direction: column;
        }
        
        /* 垂直布局样式 */
        .context-section.vertical {
           width: 100%; 
           /* margin: 10px 0; */
        }
        
        .section-title {
            font-size: 14px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 2px solid #3498db;
            text-align: center;
        }
        
        .context-components {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }
        
        .context-component {
            padding: 8px 12px;
            background: #0073b7;
            color: white;
            border: 1px solid #005689;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            min-width: 150px;
            position: relative;
        }
        
        .context-component:hover {
            background: #005689;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .context-component.selected {
            background: #ffcc00;
            color: #333;
            border-color: #ff9900;
            box-shadow: 0 2px 8px rgba(255, 235, 59, 0.3);
        }
        
        /* 垂直连接线样式 */
        .vertical-connectors {
            width: 2px;
            background: #3498db;
            /*height: 40px; */  
            position: relative;
        }
        
        .vertical-connectors::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 10px solid #3498db;
        }
        
        /* 自定义连接线样式 */
        .custom-connector {
            position: absolute;
            background-color: #ff6b6b;
            z-index: 10;
        }
        
        .custom-connector::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 10px solid #ff6b6b;
            transform: rotate(var(--arrow-rotation));
        }
        
        /* 关联关系弹窗样式 */
        #relation-modal {
            display: flex;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 关联关系列表样式 */
        .relation-item {
            background-color: #f8f9fa;
            padding: 12px;
            margin-bottom: 8px;
            border-radius: 4px;
            border-left: 4px solid #ff6b6b;
        }
        
        .relation-item strong {
            color: #333;
        }
        
        .relation-desc {
            margin-top: 5px;
            font-size: 14px;
            color: #666;
            font-style: italic;
        }
        
        .delete-relation-btn {
            float: right;
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .delete-relation-btn:hover {
            background-color: #c82333;
        }
        
        .connector-line {
            width: 2px;
            background: #3498db;
            margin: 10px 0;
            position: relative;
        }
        
        .connector-line.group-1 { height: 30px; }
        .connector-line.group-2 { height: 20px; }
        .connector-line.group-3 { height: 40px; }
        .connector-line.group-4 { height: 25px; }
        .connector-line.group-5 { height: 35px; }
        .connector-line.group-6 { height: 25px; }
        .connector-line.group-7 { height: 30px; }
        .connector-line.group-8 { height: 20px; }
        .connector-line.group-9 { height: 35px; }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .product-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .application-context-diagram {
                flex-direction: column;
                align-items: center;
            }
            
            .context-section {
                width: 100%;
                max-width: 300px;
            }
            
            .context-connectors {
                flex-direction: row;
                min-height: 40px;
                min-width: auto;
            }
            
            .connector-line {
                width: 30px;
                height: 2px;
                margin: 0 10px;
            }
        }
        
        /* 消息提示动画 */
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航区域 -->
        <div class="top-nav">
            <div class="nav-header">
                <div class="nav-title">业务需求信息与相关附件</div>
                <div class="nav-toggle">
                    <button class="toggle-btn active" onclick="toggleNavSection('demand')">[需求信息]</button>
                    <button class="toggle-btn" onclick="toggleNavSection('attachments')">[附件清单]</button>
                    <button class="toggle-btn" onclick="toggleNavSection('nfr')">[非功能性需求]</button>
                    <button class="toggle-btn" onclick="toggleNavSection('all')">[全部展开]</button>
                </div>
            </div>
            
            <div class="nav-content expanded" id="nav-content">
                <div class="nav-grid">
                    <!-- 需求信息区域 -->
                    <div class="nav-section" id="demand-section">
                        <div class="nav-section-title">基本信息</div>
                        <div class="nav-section-content">
                            <div class="demand-info">
                                <div class="demand-title">需求标题</div>
                                <div class="demand-desc">用户登录流程优化与安全加固</div>
                            </div>
                            
                            <div class="demand-info">
                                <div class="demand-title">需求描述</div>
                                <div class="demand-desc">
                                    当前用户登录流程存在安全隐患，且用户体验较差。需要重新设计登录流程，增加双因素认证选项，优化密码重置流程。
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="nav-section" id="demand-section">
                        <div class="nav-section-title">项目信息</div>
                        <div class="nav-section-content">
                            <div class="demand-info">
                                <div class="demand-title">需求提出方</div>
                                <div class="demand-desc">信息安全部</div>
                            </div>
                            
                            <div class="demand-info">
                                <div class="demand-title">提出日期</div>
                                <div class="demand-desc">2023-10-15</div>
                            </div>
                            
                            <div class="demand-info">
                                <div class="demand-title">优先级</div>
                                <div class="demand-desc">高</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="nav-section" id="demand-section">
                        <div class="nav-section-title">责任人信息</div>
                        <div class="nav-section-content">
                            <div class="demand-info">
                                <div class="demand-title">需求架构师承接人</div>
                                <div class="demand-desc">张三</div>
                            </div>
                            
                            <div class="demand-info">
                                <div class="demand-title">需求提出人</div>
                                <div class="demand-desc">李明 (信息安全部)</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="nav-section" id="attachments-section" style="display: none;">
                        <div class="nav-section-title">相关附件清单</div>
                        <div class="nav-section-content">
                            <div class="attachment-list">
                                <div class="attachment-item">
                                    <div class="attachment-name">安全审计整改单.pdf</div>
                                    <div class="attachment-meta">PDF-2.5MB</div>
                                    <div class="attachment-actions">
                                        <button class="btn-attachment" onclick="downloadFile('audit-report.pdf')">下载</button>
                                        <button class="btn-attachment" onclick="openFile('audit-report.pdf')">查看</button>
                                    </div>
                                </div>
                                <div class="attachment-item">
                                    <div class="attachment-name">系统架构审计相关问题.docx</div>
                                    <div class="attachment-meta">DOCX-1.8MB</div>
                                    <div class="attachment-actions">
                                        <button class="btn-attachment" onclick="downloadFile('architecture-design.docx')">下载</button>
                                        <button class="btn-attachment" onclick="openFile('architecture-design.docx')">查看</button>
                                    </div>
                                </div>
                                <div class="attachment-item">
                                    <div class="attachment-name">运营问题相关清单.xlsx</div>
                                    <div class="attachment-meta">XLSX-0.9MB</div>
                                    <div class="attachment-actions">
                                        <button class="btn-attachment" onclick="downloadFile('requirements-spec.xlsx')">下载</button>
                                        <button class="btn-attachment" onclick="openFile('requirements-spec.xlsx')">查看</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <div class="tabs">
                <div class="tab active" data-tab="it4it">业务模型</div>
                <div class="tab" data-tab="business">业务架构</div>
                <div class="tab" data-tab="application">应用架构</div>
                <div class="tab" data-tab="data">数据架构</div>
                <div class="tab" data-tab="technology">技术架构</div>
                <div class="tab" data-tab="security">安全架构</div>
                <div class="tab" data-tab="compliance">架构检核</div>
                <div class="tab" data-tab="changesummary">变更汇总</div>
                <div class="tab" data-tab="review">方案评审</div>
            </div>
            
            <!-- IT4IT 业务模型清单 -->
            <div class="tab-content active" id="it4it-content">
                <div class="panel-title" style="display: flex; justify-content: space-between; align-items: center;">
                    <span>业务模型</span>
                    <button class="btn-attachment" onclick="openAiRecommendationModal()" style="background: #28a745; padding: 8px 12px; font-size: 12px; border-radius: 4px; display: flex; align-items: center; gap: 5px;">
                        <i class="fa fa-robot"></i>
                        智能助手推荐（解决方案智能体）
                    </button>
                </div>
                
                <!-- 战略解析领域 -->
                <div class="domain-section">
                    <div class="domain-header" onclick="toggleDomain(this)">
                        <span>战略解析</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="domain-content">
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-1">
                            <label for="activity-1" class="activity-name">解决方案设计</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-1')">查看活动工作流</button>
                            <span class="activity-id">t₂</span>
                        </div>
                        <div id="workflow-1" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>需求分析</th>
                                        <th>设计</th>
                                        <th>评审</th>
                                        <th>实现</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">需求收集</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">需求确认</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">方案设计</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">方案是否通过?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">方案实施</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-2">
                            <label for="activity-2" class="activity-name">设计解决方案</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-2')">查看活动工作流</button>
                            <span class="activity-id">t₇</span>
                        </div>
                        <div id="workflow-2" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>需求分析</th>
                                        <th>设计</th>
                                        <th>评审</th>
                                        <th>实现</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">需求收集</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">需求确认</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">方案设计</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">方案是否通过?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">方案实施</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-3">
                            <label for="activity-3" class="activity-name">评审解决方案</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-3')">查看活动工作流</button>
                            <span class="activity-id">t₁</span>
                        </div>
                        <div id="workflow-3" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>需求分析</th>
                                        <th>设计</th>
                                        <th>评审</th>
                                        <th>实现</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">方案评审</div>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">方案是否通过?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">评审结果发布</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-4">
                            <label for="activity-4" class="activity-name">评审解决方案</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-4')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-4" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>需求分析</th>
                                        <th>设计</th>
                                        <th>评审</th>
                                        <th>实现</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">方案评审</div>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">方案是否通过?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">评审结果发布</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 解决方案设计领域 -->
                <div class="domain-section">
                    <div class="domain-header" onclick="toggleDomain(this)">
                        <span>解决方案设计</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="domain-content">
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-5">
                            <label for="activity-5" class="activity-name">需求分析</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-5')">查看活动工作流</button>
                            <span class="activity-id">t₄</span>
                        </div>
                        <div id="workflow-5" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>需求收集</th>
                                        <th>需求分析</th>
                                        <th>需求确认</th>
                                        <th>需求文档</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">用户访谈</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">需求分析</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">需求是否明确?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">需求文档编写</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-6">
                            <label for="activity-6" class="activity-name">架构设计</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-6')">查看活动工作流</button>
                            <span class="activity-id">t₅</span>
                        </div>
                        <div id="workflow-6" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>架构规划</th>
                                        <th>架构设计</th>
                                        <th>架构评审</th>
                                        <th>架构文档</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">架构规划</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">架构详细设计</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">架构是否合理?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task" onclick="showTaskDetail(this.textContent.trim())">架构文档编写</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-7">
                            <label for="activity-7" class="activity-name">技术选型</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-7')">查看活动工作流</button>
                            <span class="activity-id">t₂</span>
                        </div>
                        <div id="workflow-7" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>技术调研</th>
                                        <th>技术评估</th>
                                        <th>选型决策</th>
                                        <th>选型文档</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task">技术调研</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">技术评估</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">选型是否确定?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">选型文档编写</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 应用设计领域 -->
                <div class="domain-section">
                    <div class="domain-header" onclick="toggleDomain(this)">
                        <span>应用设计</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="domain-content">
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-8">
                            <label for="activity-8" class="activity-name">编码开发</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-8')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-8" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>编码准备</th>
                                        <th>代码实现</th>
                                        <th>代码审查</th>
                                        <th>单元测试</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">环境准备</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">编码阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">代码编写</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">代码审查</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">测试阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">单元测试</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-9">
                            <label for="activity-9" class="activity-name">测试</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-9')">查看活动工作流</button>
                            <span class="activity-id">t₅</span>
                        </div>
                        <div id="workflow-9" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>测试规划</th>
                                        <th>测试设计</th>
                                        <th>测试执行</th>
                                        <th>测试报告</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task">测试策略制定</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">设计阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">测试用例设计</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">测试执行</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">报告阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">测试报告生成</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-10">
                            <label for="activity-10" class="activity-name">投产变更</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-10')">查看活动工作流</button>
                            <span class="activity-id">t₄</span>
                        </div>
                        <div id="workflow-10" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>变更准备</th>
                                        <th>变更审批</th>
                                        <th>变更执行</th>
                                        <th>变更验证</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">变更申请</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">审批阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">多级审批</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">变更执行</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">验证阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">结果验证</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-11">
                            <label for="activity-11" class="activity-name">投产变更准备</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-11')">查看活动工作流</button>
                            <span class="activity-id">t₅</span>
                        </div>
                        <div id="workflow-11" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>计划制定</th>
                                        <th>资源准备</th>
                                        <th>风险评估</th>
                                        <th>准备就绪</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task">变更计划</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">资源调配</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">风险分析</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">确认阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">准备检查</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-12">
                            <label for="activity-12" class="activity-name">发起上线申请</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-12')">查看活动工作流</button>
                            <span class="activity-id">t₁</span>
                        </div>
                        <div id="workflow-12" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>申请准备</th>
                                        <th>申请提交</th>
                                        <th>申请审核</th>
                                        <th>申请结果</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">材料准备</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">提交阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">提交申请</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">审核是否通过?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">结果阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">结果通知</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-13">
                            <label for="activity-13" class="activity-name">关联系统核包会签</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-13')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-13" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>会签发起</th>
                                        <th>系统核包</th>
                                        <th>会签汇总</th>
                                        <th>会签结果</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">发起阶段</td>
                                        <td>
                                            <div class="bpmn-task">发起会签</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">核包阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">系统审核</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">结果汇总</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">结果反馈</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-14">
                            <label for="activity-14" class="activity-name">上线申请审批</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-14')">查看活动工作流</button>
                            <span class="activity-id">t₄</span>
                        </div>
                        <div id="workflow-14" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>审批申请</th>
                                        <th>初审</th>
                                        <th>终审</th>
                                        <th>审批结果</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">申请阶段</td>
                                        <td>
                                            <div class="bpmn-task">提交审批</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">审批阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">部门审核</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">领导审批</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">结果阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">审批反馈</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-15">
                            <label for="activity-15" class="activity-name">制品晋级</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-15')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-15" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>晋级准备</th>
                                        <th>晋级申请</th>
                                        <th>晋级验证</th>
                                        <th>晋级完成</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">制品打包</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">申请阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">提交晋级</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">环境验证</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">晋级确认</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-16">
                            <label for="activity-16" class="activity-name">生成变更计划</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-16')">查看活动工作流</button>
                            <span class="activity-id">t₁</span>
                        </div>
                        <div id="workflow-16" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>计划准备</th>
                                        <th>计划制定</th>
                                        <th>计划审核</th>
                                        <th>计划发布</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">收集需求</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">制定阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">编写计划</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">计划审核</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">发布阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">计划发布</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-17">
                            <label for="activity-17" class="activity-name">投产变更执行</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-17')">查看活动工作流</button>
                            <span class="activity-id">t₁</span>
                        </div>
                        <div id="workflow-17" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>执行准备</th>
                                        <th>变更执行</th>
                                        <th>执行验证</th>
                                        <th>执行总结</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">环境检查</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">按计划执行</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">功能验证</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">总结阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">执行报告</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-18">
                            <label for="activity-18" class="activity-name">执行变更计划</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-18')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-18" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>计划确认</th>
                                        <th>任务分配</th>
                                        <th>任务执行</th>
                                        <th>执行跟踪</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">确认阶段</td>
                                        <td>
                                            <div class="bpmn-task">计划审阅</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">分配阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">角色分配</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">任务执行</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">跟踪阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">进度跟踪</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 编码开发领域 -->
                <div class="domain-section">
                    <div class="domain-header" onclick="toggleDomain(this)">
                        <span>编码开发</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="domain-content">
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-19">
                            <label for="activity-19" class="activity-name">代码编写</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-19')">查看活动工作流</button>
                            <span class="activity-id">t₆</span>
                        </div>
                        <div id="workflow-19" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>编码准备</th>
                                        <th>代码实现</th>
                                        <th>代码调试</th>
                                        <th>代码提交</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">环境配置</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">编码阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">功能实现</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">本地调试</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">提交阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">代码提交</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-20">
                            <label for="activity-20" class="activity-name">单元测试</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-20')">查看活动工作流</button>
                            <span class="activity-id">t₂</span>
                        </div>
                        <div id="workflow-20" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>测试设计</th>
                                        <th>测试编写</th>
                                        <th>测试执行</th>
                                        <th>测试报告</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">设计阶段</td>
                                        <td>
                                            <div class="bpmn-task">测试计划</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">编写阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">测试用例</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">执行测试</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">报告阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">缺陷管理</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-21">
                            <label for="activity-21" class="activity-name">代码审查</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-21')">查看活动工作流</button>
                            <span class="activity-id">t₄</span>
                        </div>
                        <div id="workflow-21" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>审查申请</th>
                                        <th>代码审查</th>
                                        <th>问题修复</th>
                                        <th>审查完成</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">申请阶段</td>
                                        <td>
                                            <div class="bpmn-task">提交审查</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">审查阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">代码评审</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">问题修复</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">审查确认</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 测试领域 -->
                <div class="domain-section">
                    <div class="domain-header" onclick="toggleDomain(this)">
                        <span>测试</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="domain-content">
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-22">
                            <label for="activity-22" class="activity-name">集成测试</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-22')">查看活动工作流</button>
                            <span class="activity-id">t₅</span>
                        </div>
                        <div id="workflow-22" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>测试准备</th>
                                        <th>测试执行</th>
                                        <th>缺陷跟踪</th>
                                        <th>测试报告</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">环境搭建</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">执行阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">接口测试</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">缺陷管理</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">报告阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">测试总结</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-23">
                            <label for="activity-23" class="activity-name">系统测试</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-23')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-23" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>测试规划</th>
                                        <th>测试设计</th>
                                        <th>测试执行</th>
                                        <th>测试总结</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">规划阶段</td>
                                        <td>
                                            <div class="bpmn-task">测试策略</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">设计阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">测试场景</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">系统验证</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">总结阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">系统报告</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-24">
                            <label for="activity-24" class="activity-name">用户验收测试</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-24')">查看活动工作流</button>
                            <span class="activity-id">t₄</span>
                        </div>
                        <div id="workflow-24" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>验收准备</th>
                                        <th>用户测试</th>
                                        <th>问题处理</th>
                                        <th>验收完成</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">验收计划</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">测试阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">用户验证</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-gateway">?</div>
                                            <div class="bpmn-text">是否通过验收?</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">完成阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">验收报告</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 投产领域 -->
                <div class="domain-section">
                    <div class="domain-header" onclick="toggleDomain(this)">
                        <span>投产</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="domain-content">
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-25">
                            <label for="activity-25" class="activity-name">投产变更验证</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-25')">查看活动工作流</button>
                            <span class="activity-id">t₂</span>
                        </div>
                        <div id="workflow-25" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>验证准备</th>
                                        <th>功能验证</th>
                                        <th>性能验证</th>
                                        <th>验证报告</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">验证计划</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">验证阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">功能测试</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">性能测试</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">报告阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">验证总结</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-26">
                            <label for="activity-26" class="activity-name">查看</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-26')">查看活动工作流</button>
                            <span class="activity-id">t₁</span>
                        </div>
                        <div id="workflow-26" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>查看请求</th>
                                        <th>信息查询</th>
                                        <th>信息展示</th>
                                        <th>结果确认</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">请求阶段</td>
                                        <td>
                                            <div class="bpmn-task">发起查看</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">查询阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">数据检索</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">信息展示</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">确认阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">确认结果</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="activity-item">
                            <input type="checkbox" class="activity-checkbox" id="activity-27">
                            <label for="activity-27" class="activity-name">查看</label>
                            <button class="workflow-btn" onclick="toggleWorkflow('workflow-27')">查看活动工作流</button>
                            <span class="activity-id">t₃</span>
                        </div>
                        <div id="workflow-27" class="workflow-chart-container">
                            <table class="bpmn-diagram">
                                <thead>
                                    <tr>
                                        <th class="phase-column">阶段</th>
                                        <th>查看准备</th>
                                        <th>数据查询</th>
                                        <th>数据处理</th>
                                        <th>数据展示</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="phase-column">准备阶段</td>
                                        <td>
                                            <div class="bpmn-task">条件设置</div>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">查询阶段</td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">数据获取</div>
                                        </td>
                                        <td>
                                            <div class="bpmn-task">数据处理</div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="phase-column">展示阶段</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>
                                            <div class="bpmn-task">结果展示</div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 业务非功能需求整体评估 -->
                <div class="nfr-assessment-section">
                    <div class="panel-title">业务非功能需求整体评估</div>
                    
                    <div class="nfr-table-container">
                        <table class="nfr-table">
                            <thead>
                                <tr>
                                    <th>需求ID</th>
                                    <th>需求名称</th>
                                    <th>需求描述</th>
                                    <th>分类</th>
                                    <th>是否需要关注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 安全类 -->
                                <tr>
                                    <td>NFR-SEC-001</td>
                                    <td>数据加密</td>
                                    <td>所有敏感数据在传输和存储过程中必须加密</td>
                                    <td>安全</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>NFR-SEC-002</td>
                                    <td>访问控制</td>
                                    <td>实施基于角色的访问控制机制，限制用户对系统资源的访问</td>
                                    <td>安全</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>NFR-SEC-003</td>
                                    <td>安全审计</td>
                                    <td>记录所有关键操作和系统访问日志，以便进行安全审计</td>
                                    <td>安全</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                
                                <!-- 性能类 -->
                                <tr>
                                    <td>NFR-PER-001</td>
                                    <td>响应时间</td>
                                    <td>系统关键功能响应时间不超过2秒</td>
                                    <td>性能</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>NFR-PER-002</td>
                                    <td>吞吐量</td>
                                    <td>系统每秒能够处理至少1000个并发请求</td>
                                    <td>性能</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                
                                <!-- 可用性类 -->
                                <tr>
                                    <td>NFR-AVA-001</td>
                                    <td>系统可用性</td>
                                    <td>系统全年可用性不低于99.9%</td>
                                    <td>可用性</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                
                                <!-- 可扩展性类 -->
                                <tr>
                                    <td>NFR-SCA-001</td>
                                    <td>水平扩展</td>
                                    <td>系统应支持通过增加服务器节点进行水平扩展</td>
                                    <td>可扩展性</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                
                                <!-- 可维护性类 -->
                                <tr>
                                    <td>NFR-MAI-001</td>
                                    <td>故障恢复</td>
                                    <td>系统发生故障后应在30分钟内恢复</td>
                                    <td>可维护性</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                                
                                <!-- 合规性类 -->
                                <tr>
                                    <td>NFR-COM-001</td>
                                    <td>数据隐私</td>
                                    <td>系统应符合GDPR等数据隐私法规要求</td>
                                    <td>合规性</td>
                                    <td class="attention-cell">
                                        <select class="attention-select" onchange="toggleAttention(this)">
                                            <option value="no">否</option>
                                            <option value="yes">是</option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="selected-count">已选择：<span id="selected-count">0</span> 个活动</div>
            </div>
            
            <!-- 业务架构 -->
            <div class="tab-content" id="business-content">
                <div class="architecture-content">
                    
                    
                    <div class="architecture-filter">
                        <label class="filter-label">筛选条件：</label>
                        <select class="filter-select" id="business-filter">
                            <option value="all">全部业务组件</option>
                            <option value="战略解析组件">战略解析组件</option>
                            <option value="需求管理组件">需求管理组件</option>
                            <option value="解决方案设计组件">解决方案设计组件</option>
                            <option value="应用设计组件">应用设计组件</option>
                            <option value="开发环境管理组件">开发环境管理组件</option>
                            <option value="源代码管理组件">源代码管理组件</option>
                            <option value="持续集成组件">持续集成组件</option>
                            <option value="持续测试组件">持续测试组件</option>
                            <option value="持续部署组件">持续部署组件</option>
                            <option value="基础设施管理组件">基础设施管理组件</option>
                            <option value="监控运维组件">监控运维组件</option>
                            <option value="反馈改进组件">反馈改进组件</option>
                        </select>
                    </div>
                    
                    <div class="architecture-diagram">
                        <div class="business-components">
                            <!-- IT4IT业务组件清单 -->
                            <div class="business-component-group">
                                <div class="business-component-title">IT4IT业务组件</div>
                                <div class="business-component-items">
                                    <!-- 战略解析组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            战略解析组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">业务战略分析</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">IT能力评估</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">战略对齐分析</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">投资组合规划</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">定义业务目标</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">识别业务痛点</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">制定IT战略</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">评估IT能力缺口</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">业务战略</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">业务举措</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">能力需求</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">业务需求</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 需求管理组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            需求管理组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">需求收集</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">需求分析</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">需求优先级排序</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">需求变更管理</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">需求文档编写</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">需求评审</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">需求跟踪</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">需求验证</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">业务需求</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">用户故事</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">优先级排序</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">验收标准</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 解决方案设计组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            解决方案设计组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">架构设计</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">技术选型</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">解决方案评审</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">可行性分析</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">编写解决方案文档</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">创建架构图</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">定义技术规范</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">制定实施计划</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">解决方案文档</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">架构决策记录</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">技术规范</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">系统上下文图</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 应用设计组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            应用设计组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">应用架构设计</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">API设计</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">数据模型设计</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">用户界面设计</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">编写设计文档</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">创建API规范</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">设计数据模型</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">创建UI原型</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">设计文档</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">API规范</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">数据模型</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">序列图</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 开发环境管理组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            开发环境管理组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">开发环境配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">开发工具配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">开发流程定义</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">开发标准制定</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">设置开发环境</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">配置CI/CD工具</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">制定编码规范</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">创建开发文档模板</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">开发环境配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">工具链配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">开发标准</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 源代码管理组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            源代码管理组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">代码提交</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">代码分支管理</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">代码合并</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">代码审查</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">创建代码仓库</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">设置分支策略</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">执行代码审查</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">管理合并请求</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">代码仓库</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">分支</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">提交记录</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">合并请求</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 持续集成组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            持续集成组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">代码构建</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">单元测试</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">集成测试</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">静态代码分析</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">配置构建流水线</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">编写单元测试</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">执行集成测试</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">分析测试结果</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">构建流水线</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">构建报告</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">测试结果</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">制品包</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 持续测试组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            持续测试组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">测试计划制定</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">测试用例编写</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">自动化测试</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">性能测试</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">制定测试策略</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">编写测试用例</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">执行测试</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">报告缺陷</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">测试用例</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">测试计划</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">缺陷报告</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">测试环境</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 持续部署组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            持续部署组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">部署计划制定</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">自动化部署</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">部署验证</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">回滚策略</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">配置部署流水线</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">管理环境配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">执行部署</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">验证部署结果</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">部署流水线</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">环境配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">发布包</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">部署记录</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 基础设施管理组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            基础设施管理组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">基础设施规划</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">基础设施自动化</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">资源监控</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">容量管理</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">编写基础设施代码</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">配置资源</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">监控基础设施性能</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">管理基础设施成本</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">基础设施代码</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">资源配置</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">容量指标</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">成本数据</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 监控运维组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            监控运维组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">系统监控</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">日志管理</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">性能优化</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">事件管理</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">配置监控告警</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">分析日志数据</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">排查系统问题</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">生成性能报告</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">监控指标</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">日志数据</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">性能报告</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">事件记录</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 反馈改进组件 -->
                                    <div class="tree-node">
                                        <div class="tree-node-content" onclick="toggleTreeNode(this)">
                                            <span class="toggle-icon">▶</span>
                                            反馈改进组件
                                        </div>
                                        <div class="tree-children">
                                            <!-- 活动清单 -->
                                            <div class="component-list">
                                                <div class="list-title">活动清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">用户反馈收集</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">度量指标跟踪</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">流程优化</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">持续改进</div>
                                                </div>
                                            </div>
                                            <!-- 任务清单 -->
                                            <div class="component-list">
                                                <div class="list-title">任务清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">分析用户反馈</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">收集度量数据</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">识别改进机会</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">执行改进措施</div>
                                                </div>
                                            </div>
                                            <!-- 业务对象清单 -->
                                            <div class="component-list">
                                                <div class="list-title">业务对象清单</div>
                                                <div class="list-items">
                                                    <div class="list-item" onclick="toggleListItem(this)">度量指标</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">用户反馈</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">改进项</div>
                                                    <div class="list-item" onclick="toggleListItem(this)">复盘报告</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 产品模型 -->
                            <div class="business-component-group">
                                <div class="business-component-title">产品模型</div>
                                <div class="business-component-items">
                                    <!-- CPCP产品举证表格 -->
                                    <div class="product-model">
                                        <div class="model-title">CPCP产品举证表格</div>
                                        <div class="product-table">
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <th>产品类别</th>
                                                        <th>产品名称</th>
                                                        <th>影响范围</th>
                                                        <th>选择</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- 基础产品 -->
                                                    <tr>
                                                        <td rowspan="4" class="category-cell">基础产品</td>
                                                        <td>身份认证平台</td>
                                                        <td>全局登录认证</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                    <tr>
                                                        <td>权限管理系统</td>
                                                        <td>用户权限控制</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                    <tr>
                                                        <td>安全审计系统</td>
                                                        <td>登录行为审计</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                    <tr>
                                                        <td>双因素认证服务</td>
                                                        <td>二次验证</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                    
                                                    <!-- 产品组合 -->
                                                    <tr>
                                                        <td rowspan="3" class="category-cell">产品组合</td>
                                                        <td>企业安全门户</td>
                                                        <td>统一安全入口</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                    <tr>
                                                        <td>身份与访问管理套件</td>
                                                        <td>完整IAM解决方案</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                    <tr>
                                                        <td>零信任安全框架</td>
                                                        <td>全面安全防护</td>
                                                        <td><div class="product-item" onclick="toggleListItem(this)">选择</div></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="architecture-notes">
                        <label class="notes-label">业务架构备注：</label>
                        <textarea class="notes-textarea" id="business-notes" placeholder="请输入业务架构相关的备注信息..."></textarea>
                    </div>
                </div>
            </div>
            
            <!-- 应用架构 -->
            <div class="tab-content" id="application-content">
                <div class="architecture-content">
                    <!-- 目标应用架构 -->
                    <div class="architecture-title">目标应用架构</div>
                    <div class="architecture-diagram" style="margin-bottom: 30px;">
                        <!-- 目标应用架构 - 采用分层展示方式 -->
                        <div class="layered-architecture" style="padding: 0;">
                            <!-- 聚合服务层 -->
                            <div class="architecture-layer aggregation-services">
                                <div class="layer-title" style="background: #2d8f2d;">聚合服务层</div>
                                <div class="layer-components">
                                    <div class="component" onclick="selectAppComponent(this, '客户管理服务')">客户管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '产品管理服务')">产品管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '营销服务')">营销服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '销售服务')">销售服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '服务管理服务')">服务管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '订单管理服务')">订单管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '交付服务')">交付服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '计费服务')">计费服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '财务管理服务')">财务管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '人力资源服务')">人力资源服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '协同办公服务')">协同办公服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '代理业务服务')">代理业务服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '风控服务')">风控服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '合规服务')">合规服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '资产管理服务')">资产管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '负债管理服务')">负债管理服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '投资服务')">投资服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '数据服务')">数据服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '决策分析服务')">决策分析服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '报表服务')">报表服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '系统管理服务')">系统管理服务</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 业务服务层 -->
                            <div class="architecture-layer business-services">
                                <div class="layer-title" style="background: #0050a0;">业务服务层</div>
                                <div class="layer-components">
                                    <div class="component group" onclick="selectAppComponent(this, '客户数据管理')">
                                        客户数据管理
                                        <div class="sub-components">
                                            <div class="sub-component" onclick="selectAppComponent(this, '客户信息管理')">客户信息管理</div>
                                            <div class="sub-component" onclick="selectAppComponent(this, '客户分类管理')">客户分类管理</div>
                                        </div>
                                    </div>
                                    <div class="component group" onclick="selectAppComponent(this, '客户服务管理')">
                                        客户服务管理
                                        <div class="sub-components">
                                            <div class="sub-component" onclick="selectAppComponent(this, '客户咨询')">客户咨询</div>
                                            <div class="sub-component" onclick="selectAppComponent(this, '客户投诉')">客户投诉</div>
                                        </div>
                                    </div>
                                    <div class="component" onclick="selectAppComponent(this, '个人业务')">个人业务</div>
                                    <div class="component" onclick="selectAppComponent(this, '对公业务')">对公业务</div>
                                    <div class="component" onclick="selectAppComponent(this, '代理业务')">代理业务</div>
                                    <div class="component" onclick="selectAppComponent(this, '金融市场业务')">金融市场业务</div>
                                    <div class="component" onclick="selectAppComponent(this, '支付服务')">支付服务</div>
                                    <div class="component" onclick="selectAppComponent(this, '运营管理')">运营管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '风险管理')">风险管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '资产负债管理')">资产负债管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '资金管理')">资金管理</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '客户与账户')">客户与账户</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '产品与服务')">产品与服务</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '交易与订单')">交易与订单</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '支付与结算')">支付与结算</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '风险与合规')">风险与合规</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '运营与管理')">运营与管理</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '财务与核算')">财务与核算</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '决策与分析')">决策与分析</div>
                                    <div class="component" style="background-color: #e3f2fd;" onclick="selectAppComponent(this, '系统与集成')">系统与集成</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 公共能力层 -->
                            <div class="architecture-layer common-capabilities">
                                <div class="layer-title" style="background: #666666;">公共能力层</div>
                                <div class="layer-components">
                                    <div class="component group" onclick="selectAppComponent(this, '客户多维度管理')">
                                        客户多维度管理
                                        <div class="sub-components">
                                            <div class="sub-component" onclick="selectAppComponent(this, '客户画像')">客户画像</div>
                                            <div class="sub-component" onclick="selectAppComponent(this, '客户关系管理')">客户关系管理</div>
                                        </div>
                                    </div>
                                    <div class="component" onclick="selectAppComponent(this, '营销管理')">营销管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '销售管理')">销售管理</div>
                                    <div class="component group" onclick="selectAppComponent(this, '产品管理')">
                                        产品管理
                                        <div class="sub-components">
                                            <div class="sub-component" onclick="selectAppComponent(this, '产品目录')">产品目录</div>
                                            <div class="sub-component" onclick="selectAppComponent(this, '产品配置')">产品配置</div>
                                        </div>
                                    </div>
                                    <div class="component" onclick="selectAppComponent(this, '流程引擎')">流程引擎</div>
                                    <div class="component" onclick="selectAppComponent(this, '规则引擎')">规则引擎</div>
                                    <div class="component" onclick="selectAppComponent(this, '事件处理')">事件处理</div>
                                    <div class="component" onclick="selectAppComponent(this, '报表分析')">报表分析</div>
                                    <div class="component" onclick="selectAppComponent(this, '决策支持')">决策支持</div>
                                    <div class="component" onclick="selectAppComponent(this, '系统集成')">系统集成</div>
                                    <div class="component" onclick="selectAppComponent(this, '基础设施')">基础设施</div>
                                    <div class="component" onclick="selectAppComponent(this, '客户门户')">客户门户</div>
                                    <div class="component" onclick="selectAppComponent(this, '合作伙伴门户')">合作伙伴门户</div>
                                    <div class="component" onclick="selectAppComponent(this, '员工门户')">员工门户</div>
                                    <div class="component" onclick="selectAppComponent(this, '渠道管理')">渠道管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '内容管理')">内容管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '文档管理')">文档管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '工作流')">工作流</div>
                                    <div class="component" onclick="selectAppComponent(this, '表单引擎')">表单引擎</div>
                                    <div class="component" onclick="selectAppComponent(this, '消息通知')">消息通知</div>
                                    <div class="component" onclick="selectAppComponent(this, '权限管理')">权限管理</div>
                                    <div class="component" onclick="selectAppComponent(this, '数据治理')">数据治理</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 应用层 -->
                            <div class="architecture-layer applications">
                                <div class="layer-title" style="background: #e68a00;">应用层</div>
                                <div class="layer-components">
                                    <div class="component" onclick="selectAppComponent(this, '个人网银系统')">个人网银系统</div>
                                    <div class="component" onclick="selectAppComponent(this, '企业网银系统')">企业网银系统</div>
                                    <div class="component" onclick="selectAppComponent(this, '移动银行APP')">移动银行APP</div>
                                    <div class="component" onclick="selectAppComponent(this, '微信银行')">微信银行</div>
                                    <div class="component" onclick="selectAppComponent(this, '智能客服系统')">智能客服系统</div>
                                    <div class="component" onclick="selectAppComponent(this, '客户关系管理系统')">客户关系管理系统</div>
                                    <div class="component" onclick="selectAppComponent(this, '产品创新平台')">产品创新平台</div>
                                    <div class="component" onclick="selectAppComponent(this, '风险控制平台')">风险控制平台</div>
                                    <div class="component" onclick="selectAppComponent(this, '数据分析平台')">数据分析平台</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 应用架构图 -->
                    <div class="architecture-title">应用架构图</div>
                    
                    <div class="architecture-filter">
                        <label class="filter-label">筛选条件：</label>
                        <select class="filter-select" id="application-filter">
                            <option value="all">全部组件</option>
                            <option value="access">接入层</option>
                            <option value="ui">用户交互层</option>
                            <option value="application">应用服务层</option>
                            <option value="data-service">数据服务层</option>
                            <option value="data-storage">数据存储层</option>
                            <option value="infrastructure">基础设施层</option>
                            <option value="devops">DevOps工具链</option>
                        </select>
                    </div>
                    
                    <div class="architecture-diagram">
                        <div class="layered-architecture">
                            <!-- 第一层：接入层 -->
                            <div class="architecture-layer">
                                <div class="layer-title">接入层</div>
                                <div class="layer-components">
                                    <div class="component">API网关</div>
                                    <div class="component">负载均衡</div>
                                    <div class="component">CDN</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第二层：用户交互层 -->
                            <div class="architecture-layer">
                                <div class="layer-title">用户交互层</div>
                                <div class="layer-components">
                                    <div class="component group">
                                        前端应用
                                        <div class="sub-components">
                                            <div class="sub-component">Web端SPA</div>
                                            <div class="sub-component">移动端H5</div>
                                            <div class="sub-component">小程序</div>
                                        </div>
                                    </div>
                                    <div class="component">前端框架</div>
                                    <div class="component">用户体验平台</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第三层：应用服务层 -->
                            <div class="architecture-layer">
                                <div class="layer-title">应用服务层</div>
                                <div class="layer-components">
                                    <div class="component group">
                                        DevOps核心服务
                                        <div class="sub-components">
                                            <div class="sub-component">需求管理</div>
                                            <div class="sub-component">敏捷项目管理</div>
                                            <div class="sub-component">代码管理</div>
                                            <div class="sub-component">CI/CD流水线</div>
                                            <div class="sub-component">测试管理</div>
                                        </div>
                                    </div>
                                    <div class="component group">
                                        IT4IT业务管理
                                        <div class="sub-components">
                                            <div class="sub-component">战略解析</div>
                                            <div class="sub-component">解决方案设计</div>
                                            <div class="sub-component">应用设计</div>
                                            <div class="sub-component">投产变更</div>
                                        </div>
                                    </div>
                                    <div class="component group">
                                        服务治理
                                        <div class="sub-components">
                                            <div class="sub-component">服务注册中心</div>
                                            <div class="sub-component">配置中心</div>
                                            <div class="sub-component">服务监控</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第四层：数据服务层 -->
                            <div class="architecture-layer">
                                <div class="layer-title">数据服务层</div>
                                <div class="layer-components">
                                    <div class="component group">
                                        数据服务
                                        <div class="sub-components">
                                            <div class="sub-component">数据API网关</div>
                                            <div class="sub-component">数据集成服务</div>
                                            <div class="sub-component">数据转换服务</div>
                                        </div>
                                    </div>
                                    <div class="component">数据缓存</div>
                                    <div class="component">消息队列</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第五层：数据存储层 -->
                            <div class="architecture-layer">
                                <div class="layer-title">数据存储层</div>
                                <div class="layer-components">
                                    <div class="component">关系型数据库</div>
                                    <div class="component">NoSQL数据库</div>
                                    <div class="component">文件存储</div>
                                    <div class="component">时序数据库</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第六层：基础设施层 -->
                            <div class="architecture-layer">
                                <div class="layer-title">基础设施层</div>
                                <div class="layer-components">
                                    <div class="component group">
                                        云基础设施
                                        <div class="sub-components">
                                            <div class="sub-component">计算资源</div>
                                            <div class="sub-component">存储资源</div>
                                            <div class="sub-component">网络资源</div>
                                        </div>
                                    </div>
                                    <div class="component group">
                                        DevOps工具链
                                        <div class="sub-components">
                                            <div class="sub-component">容器平台</div>
                                            <div class="sub-component">编排服务</div>
                                            <div class="sub-component">自动化部署</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 应用上下文关系模块 -->
                    <div class="architecture-title">应用上下文关系</div>
                    
                    <div class="architecture-filter">
                        <label class="filter-label">筛选条件：</label>
                        <select class="filter-select" id="context-filter">
                            <option value="all">全部关系</option>
                            <option value="internal">内部调用关系</option>
                            <option value="external">外部依赖关系</option>
                        </select>
                    </div>
                    
                    <!-- 创建关联关系按钮 -->
                    <div style="margin-bottom: 15px; text-align: right;">
                        <button id="add-relation-btn" class="submit-btn" style="padding: 7px 14px; font-size: 13px;">创建关联关系</button>
                    </div>
                    
                    <div class="architecture-diagram">
                        <div class="application-context-diagram" style="flex-direction: column; align-items: center;">
                            <!-- 第一层：业务系统 -->
                            <div class="context-section vertical">
                                <div class="section-title">业务系统</div>
                                <div class="context-components">
                                    <div class="context-component">资金交易管理系统</div>
                                    <div class="context-component">消费联合贷款系统</div>
                                    <div class="context-component">代收付系统</div>
                                    <div class="context-component">存款系统</div>
                                    <div class="context-component">分行特殊业务系统</div>
                                    <div class="context-component">B2C电商合作平台系统</div>
                                    <div class="context-component">B2B电商合作平台系统</div>
                                    <div class="context-component">新贷款系统</div>
                                    <div class="context-component">移动支付收单平台</div>
                                    <div class="context-component">互联网平台</div>
                                    <div class="context-component">国际收支系统</div>
                                    <div class="context-component">国际结算系统</div>
                                    <div class="context-component">保理系统</div>
                                    <div class="context-component">中驰车福供应链平台</div>
                                    <div class="context-component">普惠金融系统</div>
                                    <div class="context-component">纸黄金系统</div>
                                    <div class="context-component">票据系统</div>
                                    <div class="context-component">投行代销系统</div>
                                    <div class="context-component">电票系统</div>
                                </div>
                            </div>
                            
                            <!-- 连接线区域 -->
                            <div class="vertical-connectors">
                                <div class="connector-line group-1"></div>
                            </div>
                            
                            <!-- 第二层：产品服务层 -->
                            <div class="context-section vertical">
                                <div class="section-title">产品服务层</div>
                                <div class="context-components">
                                    <div class="context-component">定价服务中心</div>
                                </div>
                            </div>
                            
                            <!-- 连接线区域 -->
                            <div class="vertical-connectors">
                                <div class="connector-line group-2"></div>
                            </div>
                            
                            <!-- 第三层：业务中台 -->
                            <div class="context-section vertical">
                                <div class="section-title">业务中台</div>
                                <div class="context-components">
                                    <div class="context-component">产品中心</div>
                                    <div class="context-component">客户信息中心</div>
                                    <div class="context-component">合约中心</div>
                                    <div class="context-component">核算中心</div>
                                </div>
                            </div>
                            
                            <!-- 连接线区域 -->
                            <div class="vertical-connectors">
                                <div class="connector-line group-3"></div>
                            </div>
                            
                            <!-- 第四层：管理分析层 -->
                            <div class="context-section vertical">
                                <div class="section-title">管理分析层</div>
                                <div class="context-components">
                                    <div class="context-component">风险定价系统</div>
                                    <div class="context-component">财务NC系统</div>
                                    <div class="context-component">管理会计</div>
                                    <div class="context-component">估值系统</div>
                                </div>
                            </div>
                            
                            <!-- 连接线区域 -->
                            <div class="vertical-connectors">
                                <div class="connector-line group-4"></div>
                            </div>
                            
                            <!-- 第五层：外联服务层 -->
                            <div class="context-section vertical">
                                <div class="section-title">外联服务层</div>
                                <div class="context-components">
                                    <div class="context-component">调价系统</div>
                                    <div class="context-component">前端参数维护</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 创建关联关系弹窗 -->
                    <div id="relation-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
                        <div style="background: white; padding: 20px; border-radius: 8px; width: 500px; max-width: 90%;">
                            <h3 style="margin-bottom: 15px;">创建应用关联关系</h3>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="display: block; margin-bottom: 5px;">源应用：</label>
                                <select id="source-app" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    <!-- 动态填充应用列表 -->
                                </select>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="display: block; margin-bottom: 5px;">目标应用：</label>
                                <select id="target-app" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    <!-- 动态填充应用列表 -->
                                </select>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label style="display: block; margin-bottom: 5px;">关系描述：</label>
                                <textarea id="relation-desc" rows="4" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
                            </div>
                            
                            <div style="text-align: right;">
                                <button id="cancel-relation-btn" style="padding: 8px 16px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">取消</button>
                                <button id="confirm-relation-btn" class="submit-btn" style="padding: 8px 16px;">确认创建</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 自定义关联关系列表 -->
                    <div id="custom-relations" style="margin-top: 20px;">
                        <h4 style="margin-bottom: 10px;">自定义关联关系</h4>
                        <div id="relation-list" style="max-height: 200px; overflow-y: auto;">
                            <!-- 动态填充自定义关联关系 -->
                        </div>
                    </div>
                    
                    <div class="architecture-notes">
                        <label class="notes-label">应用架构备注：</label>
                        <textarea class="notes-textarea" id="application-notes" placeholder="请输入应用架构相关的备注信息..."></textarea>
                    </div>
                </div>
            </div>
            
            <!-- 数据架构 -->
            <div class="tab-content" id="data-content">
                <div class="architecture-content">
                    <div class="architecture-title">数据架构</div>
                    
                    <div class="architecture-filter">
                        <label class="filter-label">筛选条件：</label>
                        <select class="filter-select" id="data-filter">
                            <option value="all">全部数据实体</option>
                            <option value="master">主数据</option>
                            <option value="transaction">交易数据</option>
                            <option value="reference">参考数据</option>
                        </select>
                    </div>
                    
                    <!-- 数据架构制品容器 -->
                    <div class="data-artifacts-container">
                        <!-- 数据实体目录 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">数据实体目录</div>
                                <div class="data-artifact-badge">已完成</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    描述系统中所有关键数据实体及其属性，提供统一的数据字典和数据定义。
                                </div>
                                <div class="data-chart-container">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>业务对象</th>
                                                <th>实体名称</th>
                                                <th>描述</th>
                                                <th>业务域</th>
                                                <th>负责人</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="highlightable">
                                                <td>
                                                    <select class="business-object-select" onchange="updateEntityName(this, '客户信息')">
                                                        <option value="">请选择业务对象</option>
                                                        <option value="个人客户">个人客户</option>
                                                        <option value="企业客户">企业客户</option>
                                                        <option value="VIP客户">VIP客户</option>
                                                        <option value="新业务对象">添加新业务对象</option>
                                                    </select>
                                                </td>
                                                <td class="entity-name">客户信息</td>
                                                <td>记录客户基本信息，包括个人/企业信息</td>
                                                <td>客户管理</td>
                                                <td>张三</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>
                                                    <select class="business-object-select" onchange="updateEntityName(this, '产品信息')">
                                                        <option value="">请选择业务对象</option>
                                                        <option value="存款产品">存款产品</option>
                                                        <option value="贷款产品">贷款产品</option>
                                                        <option value="理财产品">理财产品</option>
                                                        <option value="新业务对象">添加新业务对象</option>
                                                    </select>
                                                </td>
                                                <td class="entity-name">产品信息</td>
                                                <td>记录金融产品的详细信息和定价策略</td>
                                                <td>产品管理</td>
                                                <td>李四</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>
                                                    <select class="business-object-select" onchange="updateEntityName(this, '交易记录')">
                                                        <option value="">请选择业务对象</option>
                                                        <option value="存款交易">存款交易</option>
                                                        <option value="取款交易">取款交易</option>
                                                        <option value="转账交易">转账交易</option>
                                                        <option value="新业务对象">添加新业务对象</option>
                                                    </select>
                                                </td>
                                                <td class="entity-name">交易记录</td>
                                                <td>记录所有金融交易的详细信息</td>
                                                <td>交易管理</td>
                                                <td>王五</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>
                                                    <select class="business-object-select" onchange="updateEntityName(this, '账户信息')">
                                                        <option value="">请选择业务对象</option>
                                                        <option value="储蓄账户">储蓄账户</option>
                                                        <option value="信用卡账户">信用卡账户</option>
                                                        <option value="投资账户">投资账户</option>
                                                        <option value="新业务对象">添加新业务对象</option>
                                                    </select>
                                                </td>
                                                <td class="entity-name">账户信息</td>
                                                <td>记录客户账户的状态和余额</td>
                                                <td>账户管理</td>
                                                <td>赵六</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>
                                                    <select class="business-object-select" onchange="updateEntityName(this, '合约信息')">
                                                        <option value="">请选择业务对象</option>
                                                        <option value="贷款合约">贷款合约</option>
                                                        <option value="理财合约">理财合约</option>
                                                        <option value="担保合约">担保合约</option>
                                                        <option value="新业务对象">添加新业务对象</option>
                                                    </select>
                                                </td>
                                                <td class="entity-name">合约信息</td>
                                                <td>记录金融合约的详细条款和条件</td>
                                                <td>合约管理</td>
                                                <td>钱七</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据实体/业务功能矩阵 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">数据实体/业务功能矩阵</div>
                                <div class="data-artifact-badge">进行中</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示数据实体与业务功能之间的关系和依赖。
                                </div>
                                <div class="data-chart-container">
                                    <div class="data-matrix" style="grid-template-columns: 150px 100px 100px 100px 100px;">
                                        <div class="data-matrix-cell data-matrix-corner">实体/功能</div>
                                        <div class="data-matrix-cell data-matrix-header">客户管理</div>
                                        <div class="data-matrix-cell data-matrix-header">产品管理</div>
                                        <div class="data-matrix-cell data-matrix-header">交易处理</div>
                                        <div class="data-matrix-cell data-matrix-header">风控管理</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">客户信息</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">○</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">产品信息</div>
                                        <div class="data-matrix-cell highlightable">○</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">○</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">交易记录</div>
                                        <div class="data-matrix-cell highlightable">○</div>
                                        <div class="data-matrix-cell highlightable">○</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">账户信息</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">○</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                        <div class="data-matrix-cell highlightable">✓</div>
                                    </div>
                                    <div class="data-legend">
                                        <strong>图例：</strong> ✓ = 主要依赖，○ = 次要依赖
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 应用程序/数据矩阵 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">应用程序/数据矩阵</div>
                                <div class="data-artifact-badge">进行中</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示各应用程序与数据实体之间的数据交互关系。
                                </div>
                                <div class="data-chart-container">
                                    <div class="data-matrix" style="grid-template-columns: 150px 100px 100px 100px 100px;">
                                        <div class="data-matrix-cell data-matrix-corner">应用/数据</div>
                                        <div class="data-matrix-cell data-matrix-header">客户信息</div>
                                        <div class="data-matrix-cell data-matrix-header">产品信息</div>
                                        <div class="data-matrix-cell data-matrix-header">交易记录</div>
                                        <div class="data-matrix-cell data-matrix-header">账户信息</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">资金交易系统</div>
                                        <div class="data-matrix-cell highlightable">读/写</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读/写</div>
                                        <div class="data-matrix-cell highlightable">读/写</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">客户管理系统</div>
                                        <div class="data-matrix-cell highlightable">读/写</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">产品管理系统</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读/写</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                                                                    
                                        <div class="data-matrix-cell data-matrix-header">风控系统</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                        <div class="data-matrix-cell highlightable">读</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 逻辑数据图 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">逻辑数据图</div>
                                <div class="data-artifact-badge">已完成</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示数据实体的详细结构、属性和关系，不涉及物理存储细节。
                                </div>
                                <div class="data-chart-container">
                                    <div style="font-size: 13px;">
                                        <p style="font-weight: bold; margin-bottom: 10px;">实体关系模型：</p>
                                        <ul style="list-style-type: none; padding-left: 0;">
                                            <li style="margin-bottom: 10px; cursor: pointer;" class="highlightable">
                                                <strong>客户(CUSTOMER)</strong> 1:N <strong>账户(ACCOUNT)</strong>
                                                <ul style="padding-left: 20px; margin-top: 5px;">
                                                    <li>客户ID(PK) → 账户.客户ID(FK)</li>
                                                </ul>
                                            </li>
                                            <li style="margin-bottom: 10px; cursor: pointer;" class="highlightable">
                                                <strong>账户(ACCOUNT)</strong> 1:N <strong>交易(TRANSACTION)</strong>
                                                <ul style="padding-left: 20px; margin-top: 5px;">
                                                    <li>账户ID(PK) → 交易.发起账户ID(FK)</li>
                                                    <li>账户ID(PK) → 交易.目标账户ID(FK)</li>
                                                </ul>
                                            </li>
                                            <li style="margin-bottom: 10px; cursor: pointer;" class="highlightable">
                                                <strong>产品(PRODUCT)</strong> N:M <strong>账户(ACCOUNT)</strong>
                                                <ul style="padding-left: 20px; margin-top: 5px;">
                                                    <li>通过账户产品关联表连接</li>
                                                </ul>
                                            </li>
                                            <li style="margin-bottom: 10px; cursor: pointer;" class="highlightable">
                                                <strong>产品(PRODUCT)</strong> 1:N <strong>交易(TRANSACTION)</strong>
                                                <ul style="padding-left: 20px; margin-top: 5px;">
                                                    <li>产品ID(PK) → 交易.产品ID(FK)</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据传播图 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">数据传播图</div>
                                <div class="data-artifact-badge">已完成</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示数据在系统间的流动路径和转换过程。
                                </div>
                                <div class="data-chart-container">
                                    <div class="data-flow">
                                        <div class="data-flow-node highlightable">交易系统</div>
                                        <div class="data-flow-arrow highlightable"></div>
                                        <div class="data-flow-node highlightable">数据服务层</div>
                                        <div class="data-flow-arrow highlightable"></div>
                                        <div class="data-flow-node highlightable">数据仓库</div>
                                        <div class="data-flow-arrow highlightable"></div>
                                        <div class="data-flow-node highlightable">分析系统</div>
                                        <div class="data-flow-arrow highlightable"></div>
                                        <div class="data-flow-node highlightable">报表系统</div>
                                    </div>
                                    <div class="data-legend" style="text-align: center;">
                                        数据从交易系统流向报表系统的完整路径
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据安全性图 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">数据安全性图</div>
                                <div class="data-artifact-badge">进行中</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示数据在各层面的安全控制措施和访问权限管理。
                                </div>
                                <div class="data-chart-container">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>数据分类</th>
                                                <th>安全控制措施</th>
                                                <th>访问权限</th>
                                                <th>加密方式</th>
                                                <th>审计要求</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="highlightable">
                                                <td>客户敏感信息</td>
                                                <td>访问控制、加密存储、脱敏显示</td>
                                                <td>严格限制</td>
                                                <td>AES-256</td>
                                                <td>详细审计</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>交易数据</td>
                                                <td>访问控制、完整性校验</td>
                                                <td>业务需求</td>
                                                <td>传输加密</td>
                                                <td>交易审计</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>产品信息</td>
                                                <td>访问控制</td>
                                                <td>普遍访问</td>
                                                <td>无</td>
                                                <td>基本审计</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>系统配置</td>
                                                <td>管理员权限、变更控制</td>
                                                <td>管理员</td>
                                                <td>无</td>
                                                <td>变更审计</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据迁移图 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">数据迁移图</div>
                                <div class="data-artifact-badge">计划中</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示数据从源系统到目标系统的迁移策略和路径。
                                </div>
                                <div class="data-chart-container">
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>数据源</th>
                                                <th>转换规则</th>
                                                <th>目标表</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="highlightable">
                                                <td>旧客户系统</td>
                                                <td>数据清洗、字段映射</td>
                                                <td>客户信息表</td>
                                                <td>已完成</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>旧账户系统</td>
                                                <td>数据清洗、余额核对</td>
                                                <td>账户信息表</td>
                                                <td>进行中</td>
                                            </tr>
                                            <tr class="highlightable">
                                                <td>旧交易系统</td>
                                                <td>数据清洗、格式转换</td>
                                                <td>交易历史表</td>
                                                <td>计划中</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据生命周期图 -->
                        <div class="data-artifact-card">
                            <div class="data-artifact-header">
                                <div class="data-artifact-title">数据生命周期图</div>
                                <div class="data-artifact-badge">进行中</div>
                            </div>
                            <div class="data-artifact-content">
                                <div class="data-artifact-description">
                                    展示数据从创建到销毁的完整生命周期各阶段。
                                </div>
                                <div class="data-chart-container">
                                    <div class="data-lifecycle">
                                        <div class="data-lifecycle-stage highlightable">
                                            <div class="data-stage-circle">创建/采集</div>
                                        </div>
                                        <div class="data-stage-arrow highlightable"></div>
                                        <div class="data-lifecycle-stage highlightable">
                                            <div class="data-stage-circle">存储</div>
                                        </div>
                                        <div class="data-stage-arrow highlightable"></div>
                                        <div class="data-lifecycle-stage highlightable">
                                            <div class="data-stage-circle">处理</div>
                                        </div>
                                        <div class="data-stage-arrow highlightable"></div>
                                        <div class="data-lifecycle-stage highlightable">
                                            <div class="data-stage-circle">使用</div>
                                        </div>
                                        <div class="data-stage-arrow highlightable"></div>
                                        <div class="data-lifecycle-stage highlightable">
                                            <div class="data-stage-circle">归档</div>
                                        </div>
                                        <div class="data-stage-arrow highlightable"></div>
                                        <div class="data-lifecycle-stage highlightable">
                                            <div class="data-stage-circle">销毁</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="architecture-notes">
                        <label class="notes-label">数据架构备注：</label>
                        <textarea class="notes-textarea" id="data-notes" placeholder="请输入数据架构相关的备注信息..."></textarea>
                    </div>
                </div>
            </div>
            
            <!-- 技术架构 -->
            <div class="tab-content" id="technology-content">
                <div class="architecture-content">
                    <div class="architecture-title">技术架构</div>
                    
                    <!-- 筛选条件区域 -->
                    <div class="architecture-filter">
                        <div class="filter-section">
                            <label class="filter-label">系统维度筛选：</label>
                            <select class="filter-select" id="system-filter">
                                <option value="all">全部系统</option>
                                <option value="ipdo">一体化交付平台-IPDO</option>
                                <option value="mddd">数据模型托管平台-MDDD</option>
                                <option value="taas">测试管理平台-TAAS</option>
                                <option value="iams">架构资产管理平台IAMS</option>
                            </select>
                        </div>
                        
                        <div class="filter-section" style="margin-top: 10px;">
                            <label class="filter-label">架构分层筛选：</label>
                            <div class="layer-filters" style="display: flex; flex-wrap: wrap; gap: 8px;">
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="all" checked>
                                    <span style="margin-left: 5px;">全部层级</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="infrastructure" checked>
                                    <span style="margin-left: 5px;">基础设施层</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="platform" checked>
                                    <span style="margin-left: 5px;">平台层</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="data" checked>
                                    <span style="margin-left: 5px;">数据层</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="application-dev" checked>
                                    <span style="margin-left: 5px;">应用开发层</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="ops-security" checked>
                                    <span style="margin-left: 5px;">运维与安全层</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="layer-checkbox" value="special-domain" checked>
                                    <span style="margin-left: 5px;">特殊领域层</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技术架构内容区域 -->
                    <div class="architecture-diagram">
                        <div class="layered-architecture">
                            <!-- 第一层：基础设施层 -->
                            <div class="architecture-layer" data-layer="infrastructure">
                                <div class="layer-title">基础设施层</div>
                                <div class="layer-components">
                                    <div class="component group highlightable">
                                        计算资源
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">大型机(IBM zSeries)</div>
                                            <div class="sub-component highlightable">小型机(IBM Power)</div>
                                            <div class="sub-component highlightable">x86服务器</div>
                                            <div class="sub-component highlightable">ARM服务器</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        网络
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">核心交换机(Cisco/Juniper)</div>
                                            <div class="sub-component highlightable">SDN(软件定义网络)</div>
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">负载均衡器(F5/Citrix)</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        存储
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">SAN(存储区域网络)</div>
                                            <div class="sub-component highlightable">NAS(网络附加存储)</div>
                                            <div class="sub-component highlightable">分布式存储(Ceph)</div>
                                            <div class="sub-component highlightable">全闪存阵列</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第二层：平台层 -->
                            <div class="architecture-layer" data-layer="platform">
                                <div class="layer-title">平台层</div>
                                <div class="layer-components">
                                    <div class="component group highlightable">
                                        云平台
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">私有云(OpenStack/VMware)</div>
                                            <div class="sub-component highlightable">行业云(金融云)</div>
                                            <div class="sub-component highlightable">混合云管理平台</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        容器平台
                                        <div class="sub-components">
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">Kubernetes</div>
                                            <div class="sub-component highlightable">Docker</div>
                                            <div class="sub-component highlightable">Service Mesh(Istio/Linkerd)</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        中间件
                                        <div class="sub-components">
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">消息队列(IBM MQ/RocketMQ/Kafka)</div>
                                            <div class="sub-component highlightable">API网关(Kong/Apigee)</div>
                                            <div class="sub-component highlightable">ESB(企业服务总线)</div>
                                            <div class="sub-component highlightable">规则引擎(Drools)</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第三层：数据层 -->
                            <div class="architecture-layer" data-layer="data">
                                <div class="layer-title">数据层</div>
                                <div class="layer-components">
                                    <div class="component group highlightable">
                                        数据库
                                        <div class="sub-components">
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">关系型数据库(Oracle/DB2/MySQL)</div>
                                            <div class="sub-component highlightable">分布式数据库(OceanBase/TiDB)</div>
                                            <div class="sub-component highlightable">内存数据库(Redis/Hazelcast)</div>
                                            <div class="sub-component highlightable">时序数据库(InfluxDB)</div>
                                            <div class="sub-component highlightable">图数据库(Neo4j)</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        大数据平台
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">Hadoop/Spark</div>
                                            <div class="sub-component highlightable">Flink/Storm</div>
                                            <div class="sub-component highlightable">HBase/Hive</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        数据集成
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">ETL工具(Informatica/DataStage)</div>
                                            <div class="sub-component highlightable">CDC(变更数据捕获)工具</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第四层：应用开发层 -->
                            <div class="architecture-layer" data-layer="application-dev">
                                <div class="layer-title">应用开发层</div>
                                <div class="layer-components">
                                    <div class="component group highlightable">
                                        编程语言
                                        <div class="sub-components">
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">Java</div>
                                            <div class="sub-component highlightable">Python</div>
                                            <div class="sub-component highlightable">Go</div>
                                            <div class="sub-component highlightable">C/C++</div>
                                            <div class="sub-component highlightable">JavaScript/TypeScript</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        开发框架
                                        <div class="sub-components">
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">Spring Boot/Spring Cloud</div>
                                            <div class="sub-component highlightable">MyBatis/Hibernate</div>
                                            <div class="sub-component highlightable">React/Vue/Angular</div>
                                            <div class="sub-component highlightable">Gin/Echo</div>
                                            <div class="sub-component highlightable">Django/Flask</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        开发工具
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">Maven/Gradle</div>
                                            <div class="sub-component highlightable">Git/GitLab</div>
                                            <div class="sub-component highlightable">Jenkins</div>
                                            <div class="sub-component highlightable">SonarQube</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第五层：运维与安全层 -->
                            <div class="architecture-layer" data-layer="ops-security">
                                <div class="layer-title">运维与安全层</div>
                                <div class="layer-components">
                                    <div class="component group highlightable">
                                        监控
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">Prometheus/Grafana</div>
                                            <div class="sub-component highlightable">ELK/EFK Stack</div>
                                            <div class="sub-component highlightable">Zipkin/Jaeger</div>
                                            <div class="sub-component highlightable">Zabbix/Nagios</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        运维
                                        <div class="sub-components">
                                            <div class="sub-component highlightable" style="background-color: #fff9c4;">Ansible/Puppet/Chef</div>
                                            <div class="sub-component highlightable">Terraform</div>
                                            <div class="sub-component highlightable">Helm</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        安全
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">WAF(Web应用防火墙)</div>
                                            <div class="sub-component highlightable">身份认证与授权(Keycloak)</div>
                                            <div class="sub-component highlightable">加密机/HSM</div>
                                            <div class="sub-component highlightable">数据脱敏工具</div>
                                            <div class="sub-component highlightable">漏洞扫描工具</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第六层：特殊领域层 -->
                            <div class="architecture-layer" data-layer="special-domain">
                                <div class="layer-title">特殊领域层</div>
                                <div class="layer-components">
                                    <div class="component group highlightable">
                                        支付清算
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">SWIFT/CNACS/CNAPS</div>
                                            <div class="sub-component highlightable">实时支付系统</div>
                                        </div>
                                    </div>
                                    <div class="component group highlightable">
                                        区块链
                                        <div class="sub-components">
                                            <div class="sub-component highlightable">Hyperledger Fabric</div>
                                            <div class="sub-component highlightable">跨链技术</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 更新技术组件按钮 -->
                    <div style="margin-top: 20px; text-align: right;">
                        <button class="submit-btn" onclick="showUpdateReasonModal()" style="background-color: #4caf50;">更新技术组件</button>
                    </div>
                    
                    <!-- 技术架构备注 -->
                    <div class="architecture-notes">
                        <label class="notes-label">技术架构备注：</label>
                        <textarea class="notes-textarea" id="technology-notes" placeholder="请输入技术架构相关的备注信息..."></textarea>
                    </div>
                </div>
            </div>
            
            <!-- 安全架构 -->
            <div class="tab-content" id="security-content">
                <div class="architecture-content">
                    <div class="architecture-title">安全架构</div>
                    
                    <!-- 筛选条件区域 -->
                    <div class="architecture-filter">
                        <div class="filter-section">
                            <label class="filter-label">系统维度筛选：</label>
                            <select class="filter-select" id="security-system-filter">
                                <option value="all">全部系统</option>
                                <option value="ipdo">一体化交付平台-IPDO</option>
                                <option value="mddd">数据模型托管平台-MDDD</option>
                                <option value="taas">测试管理平台-TAAS</option>
                                <option value="iams">架构资产管理平台IAMS</option>
                            </select>
                        </div>
                        
                        <div class="filter-section" style="margin-top: 10px;">
                            <label class="filter-label">安全领域筛选：</label>
                            <div class="layer-filters" style="display: flex; flex-wrap: wrap; gap: 8px;">
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="all" checked>
                                    <span style="margin-left: 5px;">全部领域</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="identity-access" checked>
                                    <span style="margin-left: 5px;">身份与访问安全</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="network" checked>
                                    <span style="margin-left: 5px;">网络安全</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="endpoint" checked>
                                    <span style="margin-left: 5px;">终端与主机安全</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="data" checked>
                                    <span style="margin-left: 5px;">数据安全</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="application" checked>
                                    <span style="margin-left: 5px;">应用与开发安全</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="cloud-infra" checked>
                                    <span style="margin-left: 5px;">云与基础设施安全</span>
                                </label>
                                <label style="display: flex; align-items: center; font-weight: normal;">
                                    <input type="checkbox" class="security-domain-checkbox" value="ops" checked>
                                    <span style="margin-left: 5px;">安全运营与响应</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 安全架构内容区域 -->
                    <div class="architecture-diagram">
                        <div class="layered-architecture">
                            <!-- 第一层：身份与访问安全 -->
                            <div class="architecture-layer" data-layer="identity-access">
                                <div class="layer-title">🛡️ 身份与访问安全</div>
                                <div class="layer-components">
                                    <div class="component highlightable">身份与访问管理</div>
                                    <div class="component highlightable" style="background-color: #fff9c4;">多因素认证</div>
                                    <div class="component highlightable">零信任控制中心与代理网关</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第二层：网络安全 -->
                            <div class="architecture-layer" data-layer="network">
                                <div class="layer-title">🌐 网络安全</div>
                                <div class="layer-components">
                                    <div class="component highlightable" style="background-color: #fff9c4;">防火墙/IPS/IDS</div>
                                    <div class="component highlightable">Web应用防火墙</div>
                                    <div class="component highlightable">网络安全域与隔离</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第三层：终端与主机安全 -->
                            <div class="architecture-layer" data-layer="endpoint">
                                <div class="layer-title">🖥️ 终端与主机安全</div>
                                <div class="layer-components">
                                    <div class="component highlightable">终端检测与响应</div>
                                    <div class="component highlightable">主机加固与加密机</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第四层：数据安全 -->
                            <div class="architecture-layer" data-layer="data">
                                <div class="layer-title">📊 数据安全</div>
                                <div class="layer-components">
                                    <div class="component highlightable" style="background-color: #fff9c4;">数据安全平台</div>
                                    <div class="component highlightable">数据加密与脱敏</div>
                                    <div class="component highlightable">数据防泄漏</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第五层：应用与开发安全 -->
                            <div class="architecture-layer" data-layer="application">
                                <div class="layer-title">🔬 应用与开发安全</div>
                                <div class="layer-components">
                                    <div class="component highlightable">安全开发生命周期</div>
                                    <div class="component highlightable">API安全网关</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第六层：云与基础设施安全 -->
                            <div class="architecture-layer" data-layer="cloud-infra">
                                <div class="layer-title">☁️ 云与基础设施安全</div>
                                <div class="layer-components">
                                    <div class="component highlightable">云安全中心</div>
                                    <div class="component highlightable">虚拟化安全网关</div>
                                </div>
                            </div>
                            
                            <div class="layer-connector"></div>
                            
                            <!-- 第七层：安全运营与响应 -->
                            <div class="architecture-layer" data-layer="ops">
                                <div class="layer-title">🚨 安全运营与响应</div>
                                <div class="layer-components">
                                    <div class="component highlightable" style="background-color: #fff9c4;">统一安全运营平台</div>
                                    <div class="component highlightable">安全信息与事件管理</div>
                                    <div class="component highlightable">威胁情报平台</div>
                                    <div class="component highlightable">安全编排、自动化与响应</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 更新安全组件按钮 -->
                    <div style="margin-top: 20px; text-align: right;">
                        <button class="submit-btn" onclick="showUpdateSecurityReasonModal()" style="background-color: #4caf50;">更新安全组件</button>
                    </div>
                    
                    <!-- 安全架构备注 -->
                    <div class="architecture-notes">
                        <label class="notes-label">安全架构备注：</label>
                        <textarea class="notes-textarea" id="security-notes" placeholder="请输入安全架构相关的备注信息..."></textarea>
                    </div>
                </div>
            </div>
            
            <!-- 架构检核 -->
            <div class="tab-content" id="compliance-content">
                <div class="panel-title">架构检核</div>
                
                <!-- 架构检核概览 -->
                <div class="compliance-overview" style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eaeaea;">
                    <h3 style="margin-bottom: 15px; color: #2c3e50;">检核概览</h3>
                    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                        <div style="flex: 1; min-width: 200px; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #2c3e50; margin-bottom: 10px;">总体检核结果</h4>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <span style="background: #4caf50; color: white; padding: 5px 10px; border-radius: 4px;">通过</span>
                                <span style="font-size: 13px; color: #666;">12项满足，3项警告，1项高危</span>
                            </div>
                        </div>
                        <div style="flex: 1; min-width: 200px; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #2c3e50; margin-bottom: 10px;">架构一致性评分</h4>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <span style="font-size: 22px; font-weight: bold; color: #4caf50;">85</span>
                                <span style="font-size: 13px; color: #666;">/ 100</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 业务架构检核 -->
                <div class="architecture-compliance" style="margin-bottom: 30px;">
                    <h3 style="color: #3498db; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #3498db;">业务架构检核</h3>
                    <div style="overflow-x: auto;">
                        <table class="compliance-table" style="width: 100%; border-collapse: collapse; font-size: 13px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #3498db; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">检核项</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">检核原则</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">关联变更</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">检核结果</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">业务领域划分</td>
                                    <td style="padding: 12px 15px;">业务领域应根据业务能力和职责明确划分，避免重叠和模糊</td>
                                    <td style="padding: 12px 15px;">解决方案设计、上线申请管理</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">业务流程一致性</td>
                                    <td style="padding: 12px 15px;">业务流程应与企业战略目标一致，流程步骤清晰，无冗余环节</td>
                                    <td style="padding: 12px 15px;">解决方案设计工作流程优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">业务对象完整性</td>
                                    <td style="padding: 12px 15px;">业务对象定义应完整，属性和关系应明确，支持业务需求</td>
                                    <td style="padding: 12px 15px;">新增业务对象</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">不满足-警告</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 应用架构检核 -->
                <div class="architecture-compliance" style="margin-bottom: 30px;">
                    <h3 style="color: #e91e63; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #e91e63;">应用架构检核</h3>
                    <div style="overflow-x: auto;">
                        <table class="compliance-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #e91e63; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">检核项</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">检核原则</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">关联变更</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">检核结果</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">应用组件独立性</td>
                                    <td style="padding: 12px 15px;">应用组件应具有高内聚、低耦合特性，边界清晰</td>
                                    <td style="padding: 12px 15px;">业务流程引擎、API网关</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">微服务架构适配性</td>
                                    <td style="padding: 12px 15px;">应用架构应符合微服务设计原则，支持独立部署和扩展</td>
                                    <td style="padding: 12px 15px;">应用架构上下文扩展</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">不满足-警告</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">应用集成方式</td>
                                    <td style="padding: 12px 15px;">应用集成应采用标准化接口，支持松耦合集成</td>
                                    <td style="padding: 12px 15px;">应用集成方式优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 数据架构检核 -->
                <div class="architecture-compliance" style="margin-bottom: 30px;">
                    <h3 style="color: #4caf50; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #4caf50;">数据架构检核</h3>
                    <div style="overflow-x: auto;">
                        <table class="compliance-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #4caf50; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">检核项</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">检核原则</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">关联变更</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">检核结果</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据模型一致性</td>
                                    <td style="padding: 12px 15px;">数据模型应与业务需求一致，实体定义清晰，关系明确</td>
                                    <td style="padding: 12px 15px;">数据实体新增、数据关系变更</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">数据质量管理</td>
                                    <td style="padding: 12px 15px;">应建立数据质量管理机制，确保数据完整性、准确性和一致性</td>
                                    <td style="padding: 12px 15px;">数据流优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #f44336; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">不满足-高危</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据生命周期管理</td>
                                    <td style="padding: 12px 15px;">应定义数据生命周期各阶段的管理策略和控制措施</td>
                                    <td style="padding: 12px 15px;">数据生命周期阶段更新</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 技术架构检核 -->
                <div class="architecture-compliance" style="margin-bottom: 30px;">
                    <h3 style="color: #ff9800; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #ff9800;">技术架构检核</h3>
                    <div style="overflow-x: auto;">
                        <table class="compliance-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #ff9800; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">检核项</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">检核原则</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">关联变更</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">检核结果</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">技术栈一致性</td>
                                    <td style="padding: 12px 15px;">技术栈应遵循企业技术标准，确保技术一致性和可维护性</td>
                                    <td style="padding: 12px 15px;">技术栈更新</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">技术组件可扩展性</td>
                                    <td style="padding: 12px 15px;">技术组件应具备良好的可扩展性，支持业务增长需求</td>
                                    <td style="padding: 12px 15px;">技术组件新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">技术架构分层</td>
                                    <td style="padding: 12px 15px;">技术架构应采用清晰的分层设计，职责明确，边界清晰</td>
                                    <td style="padding: 12px 15px;">技术组件优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">不满足-警告</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 安全架构检核 -->
                <div class="architecture-compliance" style="margin-bottom: 30px;">
                    <h3 style="color: #9c27b0; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #9c27b0;">安全架构检核</h3>
                    <div style="overflow-x: auto;">
                        <table class="compliance-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #9c27b0; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">检核项</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">检核原则</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">关联变更</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">检核结果</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">安全域划分</td>
                                    <td style="padding: 12px 15px;">应根据业务敏感程度和安全要求，合理划分安全域</td>
                                    <td style="padding: 12px 15px;">安全领域新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">多层次安全防护</td>
                                    <td style="padding: 12px 15px;">应采用多层次、纵深防御的安全策略，覆盖各个安全领域</td>
                                    <td style="padding: 12px 15px;">安全组件新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">安全策略合规性</td>
                                    <td style="padding: 12px 15px;">安全策略应符合法律法规和企业安全标准要求</td>
                                    <td style="padding: 12px 15px;">安全策略更新</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">满足</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 架构检核备注 -->
                <div class="architecture-notes">
                    <label class="notes-label">架构检核备注：</label>
                    <textarea class="notes-textarea" id="compliance-notes" placeholder="请输入架构检核相关的备注信息..."></textarea>
                </div>
            </div>
            
            <!-- 变更汇总 -->
            <div class="tab-content" id="changesummary-content">
                <div class="panel-title">变更汇总</div>
                
                <!-- 总体变更汇总 -->
                <div class="change-summary-overview" style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eaeaea;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <h3 style="margin: 0; color: #2c3e50;">总体变更统计</h3>
                        <button onclick="window.location.href='model_version_compare.html'" style="background: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);" onmouseover="this.style.background='#2980b9'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 8px rgba(52, 152, 219, 0.3)'" onmouseout="this.style.background='#3498db'; this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(52, 152, 219, 0.2)'">与基线版本对比</button>
                    </div>
                    <div class="summary-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;">
                        <div class="summary-item" style="background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #3498db; margin-bottom: 10px;">业务架构</h4>
                            <p>共变更5项内容，其中包括：</p>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li>• 2个业务领域</li>
                                <li>• 3个活动</li>
                                <li>• 1个任务</li>
                                <li>• 2个活动工作流程</li>
                                <li>• 1个业务对象</li>
                            </ul>
                        </div>
                        
                        <div class="summary-item" style="background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #e91e63; margin-bottom: 10px;">应用架构</h4>
                            <p>共变更4项内容，其中包括：</p>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li>• 1个应用上下文</li>
                                <li>• 3个应用组件</li>
                                <li>• 2个应用关联关系</li>
                                <li>• 1个应用集成方式</li>
                            </ul>
                        </div>
                        
                        <div class="summary-item" style="background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #4caf50; margin-bottom: 10px;">数据架构</h4>
                            <p>共变更3项内容，其中包括：</p>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li>• 2个数据实体</li>
                                <li>• 1个数据关系</li>
                                <li>• 1个数据流</li>
                                <li>• 1个数据生命周期阶段</li>
                            </ul>
                        </div>
                        
                        <div class="summary-item" style="background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #ff9800; margin-bottom: 10px;">技术架构</h4>
                            <p>共变更2项内容，其中包括：</p>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li>• 2个技术组件</li>
                                <li>• 1个技术栈</li>
                            </ul>
                        </div>
                        
                        <div class="summary-item" style="background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <h4 style="color: #9c27b0; margin-bottom: 10px;">安全架构</h4>
                            <p>共变更3项内容，其中包括：</p>
                            <ul style="list-style-type: none; padding-left: 0;">
                                <li>• 2个安全组件</li>
                                <li>• 1个安全领域</li>
                                <li>• 1个安全策略</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 业务架构变更详情 -->
                <div class="architecture-change-detail" style="margin-bottom: 30px;">
                    <h3 style="color: #3498db; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #3498db;">业务架构变更详情</h3>
                    <div style="overflow-x: auto;">
                        <table class="change-table" style="width: 100%; border-collapse: collapse; font-size: 13px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #3498db; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更项类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更项名称</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更描述</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更状态</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更人</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #2980b9;">变更日志</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">业务领域</td>
                                    <td style="padding: 12px 15px;">解决方案设计</td>
                                    <td style="padding: 12px 15px;">扩展解决方案设计领域，增加敏捷开发方法论</td>
                                    <td style="padding: 12px 15px;">优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">王明（业务架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('业务领域', '解决方案设计', '王明（业务架构师）')" style="background-color: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">业务领域</td>
                                    <td style="padding: 12px 15px;">上线申请管理</td>
                                    <td style="padding: 12px 15px;">新增上线申请管理领域，规范上线流程</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">王明（业务架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('业务领域', '上线申请管理', '王明（业务架构师）')" style="background-color: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">活动</td>
                                    <td style="padding: 12px 15px;">解决方案设计</td>
                                    <td style="padding: 12px 15px;">更新活动工作流程，增加需求确认环节</td>
                                    <td style="padding: 12px 15px;">优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">李明（流程分析师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('活动', '解决方案设计', '李明（流程分析师）')" style="background-color: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">活动</td>
                                    <td style="padding: 12px 15px;">发起上线申请</td>
                                    <td style="padding: 12px 15px;">新增上线申请活动，定义申请流程</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">李明（流程分析师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('活动', '发起上线申请', '李明（流程分析师）')" style="background-color: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">活动</td>
                                    <td style="padding: 12px 15px;">上线申请审批</td>
                                    <td style="padding: 12px 15px;">新增上线申请审批活动，定义审批流程</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">进行中</span></td>
                                    <td style="padding: 12px 15px;">李明（流程分析师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('活动', '上线申请审批', '李明（流程分析师）')" style="background-color: #3498db; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 应用架构变更详情 -->
                <div class="architecture-change-detail" style="margin-bottom: 30px;">
                    <h3 style="color: #e91e63; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #e91e63;">应用架构变更详情</h3>
                    <div style="overflow-x: auto;">
                        <table class="change-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #e91e63; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更项类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更项名称</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更描述</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更状态</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更人</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #c2185b;">变更日志</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">应用上下文</td>
                                    <td style="padding: 12px 15px;">应用架构上下文</td>
                                    <td style="padding: 12px 15px;">扩展应用架构上下文，增加微服务架构</td>
                                    <td style="padding: 12px 15px;">优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">张华（应用架构师）</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">应用组件</td>
                                    <td style="padding: 12px 15px;">业务流程引擎</td>
                                    <td style="padding: 12px 15px;">新增业务流程引擎组件，支持流程自动化</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">张华（应用架构师）</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">应用组件</td>
                                    <td style="padding: 12px 15px;">API网关</td>
                                    <td style="padding: 12px 15px;">优化API网关，增加安全认证功能</td>
                                    <td style="padding: 12px 15px;">优化</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">进行中</span></td>
                                    <td style="padding: 12px 15px;">张华（应用架构师）</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 数据架构变更详情 -->
                <div class="architecture-change-detail" style="margin-bottom: 30px;">
                    <h3 style="color: #4caf50; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #4caf50;">数据架构变更详情</h3>
                    <div style="overflow-x: auto;">
                        <table class="change-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #4caf50; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更项类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更项名称</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更描述</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更状态</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更人</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #388e3c;">变更日志</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据实体</td>
                                    <td style="padding: 12px 15px;">变更申请</td>
                                    <td style="padding: 12px 15px;">新增变更申请实体，记录变更信息</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">张三（数据架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('数据实体', '变更申请', '张三（数据架构师）')" style="background-color: #4caf50; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">数据实体</td>
                                    <td style="padding: 12px 15px;">上线申请</td>
                                    <td style="padding: 12px 15px;">新增上线申请实体，记录上线信息</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">张三（数据架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('数据实体', '上线申请', '张三（数据架构师）')" style="background-color: #4caf50; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据关系</td>
                                    <td style="padding: 12px 15px;">变更申请与上线申请关联</td>
                                    <td style="padding: 12px 15px;">建立变更申请与上线申请的关联关系</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">进行中</span></td>
                                    <td style="padding: 12px 15px;">张三（数据架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('数据关系', '变更申请与上线申请关联', '张三（数据架构师）')" style="background-color: #4caf50; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 技术架构变更详情 -->
                <div class="architecture-change-detail" style="margin-bottom: 30px;">
                    <h3 style="color: #ff9800; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #ff9800;">技术架构变更详情</h3>
                    <div style="overflow-x: auto;">
                        <table class="change-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #ff9800; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更项类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更项名称</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更描述</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更状态</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更人</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #f57c00;">变更日志</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">技术组件</td>
                                    <td style="padding: 12px 15px;">微服务框架</td>
                                    <td style="padding: 12px 15px;">新增微服务框架，支持系统模块化</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">刘强（技术架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('技术组件', '微服务框架', '刘强（技术架构师）')" style="background-color: #ff9800; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">技术组件</td>
                                    <td style="padding: 12px 15px;">容器编排平台</td>
                                    <td style="padding: 12px 15px;">新增容器编排平台，提升部署效率</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">进行中</span></td>
                                    <td style="padding: 12px 15px;">刘强（技术架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('技术组件', '容器编排平台', '刘强（技术架构师）')" style="background-color: #ff9800; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 安全架构变更详情 -->
                <div class="architecture-change-detail" style="margin-bottom: 30px;">
                    <h3 style="color: #9c27b0; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #9c27b0;">安全架构变更详情</h3>
                    <div style="overflow-x: auto;">
                        <table class="change-table" style="width: 100%; border-collapse: collapse; font-size: 14px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <thead>
                                <tr style="background: #9c27b0; color: white;">
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更项类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更项名称</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更描述</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更类型</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更状态</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更人</th>
                                    <th style="padding: 12px 15px; text-align: left; font-weight: bold; border-bottom: 2px solid #7b1fa2;">变更日志</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">安全组件</td>
                                    <td style="padding: 12px 15px;">多因素认证</td>
                                    <td style="padding: 12px 15px;">新增多因素认证组件，提升身份认证安全性</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">周军（安全架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('安全组件', '多因素认证', '周军（安全架构师）')" style="background-color: #9c27b0; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">安全组件</td>
                                    <td style="padding: 12px 15px;">数据安全平台</td>
                                    <td style="padding: 12px 15px;">新增数据安全平台，加强数据保护</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">已完成</span></td>
                                    <td style="padding: 12px 15px;">周军（安全架构师）</td>
                                    <td style="padding: 12px 15px;"><button onclick="showChangeLogModal('安全组件', '数据安全平台', '周军（安全架构师）')" style="background-color: #9c27b0; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">查看</button></td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">安全策略</td>
                                    <td style="padding: 12px 15px;">变更管理安全策略</td>
                                    <td style="padding: 12px 15px;">新增变更管理安全策略，规范变更流程安全要求</td>
                                    <td style="padding: 12px 15px;">新增</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">进行中</span></td>
                                    <td style="padding: 12px 15px;">周军（安全架构师）</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 方案评审 -->
            <div class="tab-content" id="review-content">
                <div class="panel-title">方案评审</div>
                
                <!-- 总体评审结论 -->
                <div class="review-overview" style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eaeaea;">
                    <h3 style="margin-bottom: 10px; color: #2c3e50;">总体评审结论 
                        <button class="collapsible-toggle-btn" onclick="toggleReviewSection('overview')" style="float: right; background: #007bff; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                            <i class="fa fa-eye" id="overview-toggle-icon"></i> 查看详情
                        </button>
                    </h3>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="background-color: #4caf50; color: white; padding: 15px; border-radius: 6px; font-size: 14px; font-weight: bold; flex: 1;">
                            方案已通过评审， 评审解决方案模型版本号：solution_2024_07_v1.0.1
                        </div>
                        <button onclick="showSolutionDocumentModal()" style="background: #2196f3; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; margin-left: 15px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2); white-space: nowrap;" onmouseover="this.style.background='#1976d2'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 8px rgba(33, 150, 243, 0.3)'" onmouseout="this.style.background='#2196f3'; this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(33, 150, 243, 0.2)'"> 查看自动生成的在线文档</button>
                    </div>
                </div>
                
                <!-- 评审纪要 - 第二次评审（最后一次） -->
                <div class="review-section" style="margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                    <div class="review-header" style="background-color: #2196f3; color: white; padding: 15px;">
                        <h3>第二次评审（最终版）
                            <button class="collapsible-toggle-btn" onclick="toggleReviewSection('final')" style="float: right; background: #28a745; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                <i class="fa fa-eye" id="final-toggle-icon"></i> 查看详情
                            </button>
                        </h3>
                        <p style="margin: 5px 0 0 0;">评审时间：2024-05-15 14:00-16:30 | 评审方式：线上评审（视频会议）</p>
                    </div>
                    <div class="review-content" style="padding: 20px; background-color: white; display: none;" id="final-content">
                        <table class="review-table" style="width: 100%; border-collapse: collapse; font-size: 13px;">
                            <thead>
                                <tr style="background: #f2f2f2;">
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">角色</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">评审人</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">评审结果</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">评审意见</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">业务架构师</td>
                                    <td style="padding: 12px 15px;">李明</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">业务流程优化方案合理，符合业务需求</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">应用架构师</td>
                                    <td style="padding: 12px 15px;">张华</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">微服务架构设计合理，API接口定义清晰</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据架构师</td>
                                    <td style="padding: 12px 15px;">王芳</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">数据模型设计完善，满足数据一致性要求</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">技术架构师</td>
                                    <td style="padding: 12px 15px;">赵强</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">技术选型合理，符合企业技术栈标准</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">安全架构师</td>
                                    <td style="padding: 12px 15px;">陈静</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">安全方案完善，满足企业安全合规要求</td>
                                </tr>
                                <tr style="background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">项目经理</td>
                                    <td style="padding: 12px 15px;">刘伟</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">项目计划可行，资源配置合理</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 评审纪要 - 第一次评审（未通过） -->
                <div class="review-section" style="margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                    <div class="review-header" style="background-color: #ff9800; color: white; padding: 15px;">
                        <h3>第一次评审
                            <button class="collapsible-toggle-btn" onclick="toggleReviewSection('first')" style="float: right; background: #ffc107; color: #212529; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                <i class="fa fa-eye" id="first-toggle-icon"></i> 查看详情
                            </button>
                        </h3>
                        <p style="margin: 5px 0 0 0;">评审时间：2024-05-08 10:00-12:00 | 评审方式：线下评审</p>
                    </div>
                    <div class="review-content" style="padding: 20px; background-color: white; display: none;" id="first-content">
                        <table class="review-table" style="width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px;">
                            <thead>
                                <tr style="background: #f2f2f2;">
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">角色</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">评审人</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">评审结果</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">评审意见</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">业务架构师</td>
                                    <td style="padding: 12px 15px;">李明</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">业务流程设计合理</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">应用架构师</td>
                                    <td style="padding: 12px 15px;">张华</td>
                                    <td style="padding: 12px 15px;"><span style="background: #f44336; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">未通过</span></td>
                                    <td style="padding: 12px 15px;">微服务拆分粒度不合理，需要优化API设计</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据架构师</td>
                                    <td style="padding: 12px 15px;">王芳</td>
                                    <td style="padding: 12px 15px;"><span style="background: #f44336; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">未通过</span></td>
                                    <td style="padding: 12px 15px;">数据模型设计不完整，缺乏数据一致性保障机制</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">技术架构师</td>
                                    <td style="padding: 12px 15px;">赵强</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">部分通过</span></td>
                                    <td style="padding: 12px 15px;">技术选型基本合理，但需要补充性能评估</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">安全架构师</td>
                                    <td style="padding: 12px 15px;">陈静</td>
                                    <td style="padding: 12px 15px;"><span style="background: #4caf50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">全部通过</span></td>
                                    <td style="padding: 12px 15px;">安全方案符合要求</td>
                                </tr>
                                <tr style="background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">项目经理</td>
                                    <td style="padding: 12px 15px;">刘伟</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px;">部分通过</span></td>
                                    <td style="padding: 12px 15px;">项目计划需要细化关键路径</td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <!-- 不通过决策人信息 -->
                        <div class="reject-info" style="background-color: #ffebee; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 4px solid #f44336;">
                            <h4 style="margin-top: 0; color: #c62828;">不通过决策人信息</h4>
                            <p><strong>主要决策人：</strong>张华（应用架构师）、王芳（数据架构师）</p>
                            <p><strong>决策理由：</strong>应用架构和数据架构设计不满足企业标准，需要优化调整</p>
                        </div>
                        
                        <!-- 代办事项 -->
                        <div class="todo-items" style="background-color: #fff3e0; padding: 15px; border-radius: 6px; border-left: 4px solid #ff9800;">
                            <h4 style="margin-top: 0; color: #e65100;">代办事项</h4>
                            <table class="todo-table" style="width: 100%; border-collapse: collapse; font-size: 13px;">
                                <thead>
                                    <tr style="background: #ffe0b2;">
                                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #ffcc80;">事项描述</th>
                                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #ffcc80;">责任人</th>
                                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #ffcc80;">完成时间要求</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr style="border-bottom: 1px solid #ffecb3;">
                                        <td style="padding: 10px;">优化微服务拆分粒度，重新设计API接口</td>
                                        <td style="padding: 10px;">张华（应用架构师）</td>
                                        <td style="padding: 10px;">2024-05-12</td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #ffecb3;">
                                        <td style="padding: 10px;">完善数据模型设计，添加数据一致性保障机制</td>
                                        <td style="padding: 10px;">王芳（数据架构师）</td>
                                        <td style="padding: 10px;">2024-05-12</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 10px;">补充技术选型性能评估报告</td>
                                        <td style="padding: 10px;">赵强（技术架构师）</td>
                                        <td style="padding: 10px;">2024-05-10</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 相关架构决策信息 -->
                <div class="review-section" style="margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                    <div class="review-header" style="background-color: #3498db; color: white; padding: 15px;">
                        <h3>相关架构决策信息
                            <button class="collapsible-toggle-btn" onclick="toggleReviewSection('decision')" style="float: right; background: #6f42c1; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                <i class="fa fa-eye" id="decision-toggle-icon"></i> 查看详情
                            </button>
                        </h3>
                        <p style="margin: 5px 0 0 0;">方案评审过程中的关键架构决策记录</p>
                    </div>
                    <div class="review-content" style="padding: 20px; background-color: white; display: none;" id="decision-content">
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">评审名称</strong>
                                <span>用户登录流程安全优化方案评审</span>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">评审级别</strong>
                                <span>多级评审</span>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">申请人</strong>
                                <span>张三</span>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">关系系统</strong>
                                <span>用户认证中心、统一身份管理系统</span>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef; grid-column: span 2;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">评审要点</strong>
                                <ul style="margin: 0; padding-left: 20px;">
                                    <li>登录认证流程安全性评估</li>
                                    <li>多因素认证方案可行性分析</li>
                                    <li>身份验证失败处理机制</li>
                                    <li>系统集成复杂度评估</li>
                                    <li>性能影响评估</li>
                                </ul>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">评审时间</strong>
                                <span>2023-11-05</span>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">评审方式</strong>
                                <span>现场会议+线上评审</span>
                            </div>
                            <div class="decision-item" style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid #e9ecef; grid-column: span 2;">
                                <strong style="color: #3498db; display: block; margin-bottom: 8px;">评审结果</strong>
                                <div style="background-color: #e8f5e9; color: #2e7d32; padding: 10px; border-radius: 4px; font-weight: bold;">通过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工作量评估 -->
                <div class="review-section" style="margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                    <div class="review-header" style="background-color: #9c27b0; color: white; padding: 15px;">
                        <h3>工作量评估
                            <button class="collapsible-toggle-btn" onclick="toggleReviewSection('workload')" style="float: right; background: #dc3545; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">
                                <i class="fa fa-eye" id="workload-toggle-icon"></i> 查看详情
                            </button>
                        </h3>
                        <p style="margin: 5px 0 0 0;">按变更详情项分别评估应用实现的人月工作量</p>
                    </div>
                    <div class="review-content" style="padding: 20px; background-color: white; display: none;" id="workload-content">
                        <table class="review-table" style="width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px;">
                            <thead>
                                <tr style="background: #f2f2f2;">
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">变更项类型</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">变更项名称</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">关联架构模型数量</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">预计人月工作量</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">计算方法</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">应用架构</td>
                                    <td style="padding: 12px 15px;">变更登录功能，增加登录方式</td>
                                    <td style="padding: 12px 15px;">
                                        <div class="model-count" style="cursor: pointer; color: #3498db;" onclick="showModelDetails('model1')">
                                            应用架构模型数据：业务领域：1个<br>
                                            价值流：1个<br>
                                            活动：3个<br>
                                            任务：5个
                                        </div>
                                    </td>
                                    <td style="padding: 12px 15px;">2.5 人月</td>
                                    <td style="padding: 12px 15px;">需求分析(0.5)+设计(0.5)+开发(1.0)+测试(0.5)</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">应用架构</td>
                                    <td style="padding: 12px 15px;">增加登录安全加固</td>
                                    <td style="padding: 12px 15px;">
                                        <div class="model-count" style="cursor: pointer; color: #3498db;" onclick="showModelDetails('model2')">
                                            应用架构模型数据：业务领域：1个<br>
                                            价值流：1个<br>
                                            活动：2个<br>
                                            任务：3个
                                        </div>
                                    </td>
                                    <td style="padding: 12px 15px;">1.5 人月</td>
                                    <td style="padding: 12px 15px;">需求分析(0.3)+设计(0.4)+开发(0.5)+测试(0.3)</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">数据架构</td>
                                    <td style="padding: 12px 15px;">用户认证数据模型优化</td>
                                    <td style="padding: 12px 15px;">
                                        <div class="model-count" style="cursor: pointer; color: #3498db;" onclick="showModelDetails('model3')">
                                            数据架构模型数据：业务领域：1个<br>
                                            数据实体：4个<br>
                                            关系：6个<br>
                                            属性：18个
                                        </div>
                                    </td>
                                    <td style="padding: 12px 15px;">1.0 人月</td>
                                    <td style="padding: 12px 15px;">需求分析(0.2)+设计(0.4)+开发(0.3)+测试(0.1)</td>
                                </tr>
                                <tr style="border-bottom: 1px solid #eee; background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">技术架构</td>
                                    <td style="padding: 12px 15px;">认证服务接口改造</td>
                                    <td style="padding: 12px 15px;">
                                        <div class="model-count" style="cursor: pointer; color: #3498db;" onclick="showModelDetails('model4')">
                                            技术架构模型数据：组件：2个<br>
                                            接口：5个<br>
                                            服务：3个<br>
                                            依赖：4个
                                        </div>
                                    </td>
                                    <td style="padding: 12px 15px;">1.0 人月</td>
                                    <td style="padding: 12px 15px;">需求分析(0.2)+设计(0.3)+开发(0.4)+测试(0.1)</td>
                                </tr>
                                <tr>
                                    <td style="padding: 12px 15px;">安全架构</td>
                                    <td style="padding: 12px 15px;">认证安全策略更新</td>
                                    <td style="padding: 12px 15px;">
                                        <div class="model-count" style="cursor: pointer; color: #3498db;" onclick="showModelDetails('model5')">
                                            安全架构模型数据：策略：2个<br>
                                            控制：3个<br>
                                            风险：1个<br>
                                            合规：1个
                                        </div>
                                    </td>
                                    <td style="padding: 12px 15px;">0.5 人月</td>
                                    <td style="padding: 12px 15px;">需求分析(0.1)+设计(0.2)+开发(0.1)+测试(0.1)</td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <!-- 模型详情弹窗 -->
                        <div id="modelDetailsModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
                            <div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 8px;">
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                                    <h3 id="modelModalTitle" style="margin: 0;">关联架构模型详细信息</h3>
                                    <span onclick="closeModelDetails()" style="color: #aaa; float: right; font-size: 26px; font-weight: bold; cursor: pointer;">&times;</span>
                                </div>
                                <div id="modelModalContent" style="max-height: 400px; overflow-y: auto;">
                                    <!-- 模型详细信息将通过JavaScript动态填充 -->
                                </div>
                            </div>
                        </div>

                        <script>
                            function showModelDetails(modelId) {
                                const modal = document.getElementById('modelDetailsModal');
                                const modalContent = document.getElementById('modelModalContent');
                                const modalTitle = document.getElementById('modelModalTitle');
                                
                                // 根据模型ID设置不同的详细信息
                                let details = '';
                                let title = '';
                                
                                switch(modelId) {
                                    case 'model1':
                                        title = '变更登录功能，增加登录方式 - 关联架构模型';
                                        details = `
                                            <h4>应用架构模型数据</h4>
                                            <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">业务领域：</td>
                                                    <td style="padding: 8px;">身份认证与访问控制</td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">价值流：</td>
                                                    <td style="padding: 8px;">用户身份认证流程</td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">活动：</td>
                                                    <td style="padding: 8px;">
                                                        <div>用户身份验证</div>
                                                        <div>凭证管理</div>
                                                        <div>会话管理</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 8px; font-weight: bold;">任务：</td>
                                                    <td style="padding: 8px;">
                                                        <div>用户名/密码验证</div>
                                                        <div>多因素认证</div>
                                                        <div>第三方登录集成</div>
                                                        <div>会话创建与维护</div>
                                                        <div>会话超时处理</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        `;
                                        break;
                                    case 'model2':
                                        title = '增加登录安全加固 - 关联架构模型';
                                        details = `
                                            <h4>应用架构模型数据</h4>
                                            <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">业务领域：</td>
                                                    <td style="padding: 8px;">安全防护</td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">价值流：</td>
                                                    <td style="padding: 8px;">安全认证流程</td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">活动：</td>
                                                    <td style="padding: 8px;">
                                                        <div>安全策略实施</div>
                                                        <div>异常检测与响应</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 8px; font-weight: bold;">任务：</td>
                                                    <td style="padding: 8px;">
                                                        <div>密码复杂度策略</div>
                                                        <div>账户锁定机制</div>
                                                        <div>登录失败审计</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        `;
                                        break;
                                    case 'model3':
                                        title = '用户认证数据模型优化 - 关联架构模型';
                                        details = `
                                            <h4>数据架构模型数据</h4>
                                            <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">业务领域：</td>
                                                    <td style="padding: 8px;">用户数据管理</td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">数据实体：</td>
                                                    <td style="padding: 8px;">
                                                        <div>用户(User)</div>
                                                        <div>认证凭证(Credential)</div>
                                                        <div>角色(Role)</div>
                                                        <div>权限(Permission)</div>
                                                    </td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">关系：</td>
                                                    <td style="padding: 8px;">
                                                        <div>用户-凭证 (一对多)</div>
                                                        <div>用户-角色 (多对多)</div>
                                                        <div>角色-权限 (多对多)</div>
                                                        <div>用户-会话 (一对多)</div>
                                                        <div>凭证-认证日志 (一对多)</div>
                                                        <div>用户-审计日志 (一对多)</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 8px; font-weight: bold;">关键属性：</td>
                                                    <td style="padding: 8px;">
                                                        <div>用户ID、用户名、邮箱、手机号、创建时间、最后登录时间</div>
                                                        <div>凭证ID、用户ID、凭证类型、凭证值(加密)、生效日期、过期日期</div>
                                                        <div>角色ID、角色名称、描述</div>
                                                        <div>权限ID、权限名称、资源类型、操作类型</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        `;
                                        break;
                                    case 'model4':
                                        title = '认证服务接口改造 - 关联架构模型';
                                        details = `
                                            <h4>技术架构模型数据</h4>
                                            <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">组件：</td>
                                                    <td style="padding: 8px;">
                                                        <div>认证服务(Authentication Service)</div>
                                                        <div>授权服务(Authorization Service)</div>
                                                    </td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">接口：</td>
                                                    <td style="padding: 8px;">
                                                        <div>POST /api/auth/login - 用户登录</div>
                                                        <div>POST /api/auth/logout - 用户登出</div>
                                                        <div>GET /api/auth/userinfo - 获取用户信息</div>
                                                        <div>POST /api/auth/refresh - 刷新令牌</div>
                                                        <div>POST /api/auth/mfa - 多因素认证</div>
                                                    </td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">服务：</td>
                                                    <td style="padding: 8px;">
                                                        <div>本地认证服务</div>
                                                        <div>LDAP认证服务</div>
                                                        <div>OAuth2认证服务</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 8px; font-weight: bold;">依赖：</td>
                                                    <td style="padding: 8px;">
                                                        <div>用户数据存储</div>
                                                        <div>会话管理服务</div>
                                                        <div>加密服务</div>
                                                        <div>审计日志服务</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        `;
                                        break;
                                    case 'model5':
                                        title = '认证安全策略更新 - 关联架构模型';
                                        details = `
                                            <h4>安全架构模型数据</h4>
                                            <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">策略：</td>
                                                    <td style="padding: 8px;">
                                                        <div>密码策略 - 复杂度要求、过期时间、历史密码限制</div>
                                                        <div>会话策略 - 超时设置、并发会话限制</div>
                                                    </td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">控制：</td>
                                                    <td style="padding: 8px;">
                                                        <div>多因素认证(MFA)</div>
                                                        <div>IP地址白名单/黑名单</div>
                                                        <div>登录失败次数限制与账户锁定</div>
                                                    </td>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #eee;">
                                                    <td style="padding: 8px; font-weight: bold;">风险：</td>
                                                    <td style="padding: 8px;">
                                                        <div>凭证泄露风险 - 通过加密存储和传输缓解</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 8px; font-weight: bold;">合规：</td>
                                                    <td style="padding: 8px;">
                                                        <div>符合公司数据安全规范要求</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        `;
                                        break;
                                }
                                
                                modalTitle.textContent = title;
                                modalContent.innerHTML = details;
                                modal.style.display = 'block';
                            }
                            
                            function closeModelDetails() {
                                document.getElementById('modelDetailsModal').style.display = 'none';
                            }
                            
                            // 点击弹窗外部区域关闭弹窗
                            window.onclick = function(event) {
                                const modal = document.getElementById('modelDetailsModal');
                                if (event.target === modal) {
                                    modal.style.display = 'none';
                                }
                            }
                        </script>

                        <!-- 工作量评估结论 -->
                        <div class="workload-conclusion" style="background-color: #e8f5e9; padding: 15px; border-radius: 6px; border-left: 4px solid #4caf50;">
                            <h4 style="margin-top: 0; color: #2e7d32;">评审工作量结果结论</h4>
                            <p>经评审，本项目总工作量为6.5人月，评估合理，符合项目复杂度和技术难度预期。各变更项的工作量分配合理，能够满足项目实施需求。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 排期计划 -->
                <div class="review-section" style="margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                    <div class="review-header" style="background-color: #ff5722; color: white; padding: 15px;">
                        <h3>特性拆分信息</h3>
                        <p style="margin: 5px 0 0 0;">业务需求可拆解为分批投产：<strong>是</strong> 特性是否有依赖关系：<strong>是</strong></p>
                    </div>
                    <div class="review-content" style="padding: 20px; background-color: white;">
                        <table class="review-table" style="width: 100%; border-collapse: collapse; font-size: 13px;">
                            <thead>
                                <tr style="background: #f2f2f2;">
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">特性</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">特性描述</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">期望投产时间</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">关联架构模型数量</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">汇总工作量</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">优先级</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">关联系统</th>
                                    <th style="padding: 12px 15px; text-align: left; border-bottom: 2px solid #ddd;">排期操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom: 1px solid #eee;">
                                    <td style="padding: 12px 15px;">特性1</td>
                                    <td style="padding: 12px 15px;">变更登录功能，增加登录方式</td>
                                    <td style="padding: 12px 15px;">2024-06-30</td>
                                    <td style="padding: 12px 15px;">3</td>
                                    <td style="padding: 12px 15px;">3.5 人月</td>
                                    <td style="padding: 12px 15px;"><span style="background: #f44336; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">高</span></td>
                                    <td style="padding: 12px 15px;">
                                        <div>IPDO-一体化交付平台</div>
                                        <div>MDDD-模型资产管控平台</div>
                                    </td>
                                    <td style="padding: 12px 15px;"><div class="schedule-link" style="cursor: pointer; color: #3498db; text-decoration: underline;" onclick="openCreateScheduleModal('特性1', '变更登录功能，增加登录方式', '2024-06-30', 'IPDO-一体化交付平台,MDDD-模型资产管控平台', '高', '3.5 人月')">创建排期</div></td>
                                    
                                </tr>
                                <tr style="background: #f9f9f9;">
                                    <td style="padding: 12px 15px;">特性2</td>
                                    <td style="padding: 12px 15px;">增加登录安全加固</td>
                                    <td style="padding: 12px 15px;">2024-07-31</td>
                                    <td style="padding: 12px 15px;">2</td>
                                    <td style="padding: 12px 15px;">3.0 人月</td>
                                    <td style="padding: 12px 15px;"><span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 4px; font-size: 11px;">中</span></td>
                                    <td style="padding: 12px 15px;">
                                        <div>SSOD-单点登录平台</div>
                                        <div>SDPD-安全数据防护系统</div>
                                    </td>
                                    <td style="padding: 12px 15px;"><div class="schedule-link" style="cursor: pointer; color: #3498db; text-decoration: underline;" onclick="openCreateScheduleModal('特性2', '增加登录安全加固', '2024-07-31', 'SSOD-单点登录平台,SDPD-安全数据防护系统', '中', '3.0 人月')">创建排期</div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <button class="submit-btn" onclick="submitSelection()">提交拣选结果</button>
        </div>
    </div>

    <!-- 更新技术组件模态框 -->
    <div id="update-reason-modal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
        <div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 50%;">
            <h3>更新技术组件理由</h3>
            <textarea id="update-reason" rows="5" style="width: 100%; padding: 10px; margin: 10px 0;" placeholder="请输入更新技术组件的理由..."></textarea>
            <div style="text-align: right;">
                <button onclick="closeUpdateReasonModal()" style="margin-right: 10px; padding: 5px 15px;">取消</button>
                <button onclick="updateTechnologyComponents()" style="background-color: #4caf50; color: white; padding: 5px 15px;">确认更新</button>
            </div>
        </div>
    </div>

    <!-- 变更日志弹窗 -->
    <div id="change-log-modal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
        <div style="background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 70%; max-height: 70vh; overflow-y: auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 id="change-log-title" style="margin: 0;">变更日志</h3>
                <button onclick="closeChangeLogModal()" style="background: none; border: none; font-size: 22px; cursor: pointer;">&times;</button>
            </div>
            <div id="change-log-content" style="font-family: monospace; white-space: pre-wrap;">
                <!-- 变更日志内容将通过JavaScript动态填充 -->
            </div>
            <div style="text-align: right; margin-top: 20px;">
                <button onclick="closeChangeLogModal()" style="padding: 8px 16px; background-color: #f1f1f1; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">关闭</button>
            </div>
        </div>
    </div>

    <!-- 创建排期模态框 -->
    <div id="create-schedule-modal-review" style="display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5);">
        <div style="background-color: white; margin: 2% auto; padding: 0; border-radius: 8px; width: 95%; max-width: 1200px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
            <!-- 模态框头部 -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #e0e0e0;">
                <h3 style="margin: 0; color: #2c3e50; font-size: 20px;">创建排期</h3>
                <button onclick="closeCreateScheduleModal()" style="background: none; border: none; font-size: 24px; cursor: pointer; color: #999; transition: color 0.3s;" onmouseover="this.style.color='#333'" onmouseout="this.style.color='#999'">&times;</button>
            </div>
            
            <!-- 模态框内容 -->
            <div style="padding: 20px; max-height: calc(90vh - 180px); overflow-y: auto;">
                <form id="create-schedule-form-review">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                        <!-- 特性ID -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">特性ID</label>
                            <input type="text" id="schedule-feature-id" readonly style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; font-size: 14px;">
                        </div>
                        
                        <!-- 特性名称 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">特性名称</label>
                            <input type="text" id="schedule-feature-name" readonly style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; font-size: 14px;">
                        </div>
                        
                        <!-- 排期名称 -->
                        <div style="grid-column: span 2;">
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">排期名称 <span style="color: #e74c3c;">*</span></label>
                            <input type="text" id="schedule-name-input" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'" placeholder="请输入排期名称">
                        </div>
                        
                        <!-- 排期类型 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">排期类型 <span style="color: #e74c3c;">*</span></label>
                            <select id="schedule-type-select" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'">
                                <option value="">请选择</option>
                                <option value="single-system">单系统排期</option>
                                <option value="urgent">紧急排期</option>
                                <option value="big-production">大投产日排期</option>
                                <option value="data-refresh">刷数排期</option>
                                <option value="data-extraction">取数排期</option>
                            </select>
                        </div>
                        
                        <!-- 优先级 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">优先级</label>
                            <input type="text" id="schedule-priority-input" readonly style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; font-size: 14px;">
                        </div>
                        
                        <!-- 开始日期 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">开始日期 <span style="color: #e74c3c;">*</span></label>
                            <input type="date" id="schedule-start-date" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'">
                        </div>
                        
                        <!-- 结束日期 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">结束日期 <span style="color: #e74c3c;">*</span></label>
                            <input type="date" id="schedule-end-date" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'">
                        </div>
                        
                        <!-- 所属系统 -->
                        <div style="grid-column: span 2;">
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">所属系统</label>
                            <input type="text" id="schedule-systems-input" readonly style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; font-size: 14px;">
                        </div>
                        
                        <!-- 预计工时 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">预计工时</label>
                            <input type="text" id="schedule-workload-input" readonly style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; font-size: 14px;">
                        </div>
                        
                        <!-- 负责人 -->
                        <div>
                            <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">负责人 <span style="color: #e74c3c;">*</span></label>
                            <input type="text" id="schedule-manager-input" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'" placeholder="请输入负责人姓名">
                        </div>
                    </div>
                    
                    <!-- 排期描述 -->
                    <div style="margin-bottom: 20px;">
                        <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">排期描述</label>
                        <textarea id="schedule-description-input" rows="3" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'" placeholder="请输入排期详细描述"></textarea>
                    </div>
                    
                    <!-- 测试计划信息 -->
                    <div style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0;">
                        <h4 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 16px; font-weight: 600; border-bottom: 2px solid #0066cc; padding-bottom: 8px;">
                            <i class="fa fa-flask" style="margin-right: 8px; color: #0066cc;"></i>测试计划信息
                        </h4>
                        
                        <div style="display: grid; grid-template-columns: 1fr; gap: 15px;">
                            <!-- 集成测试 -->
                            <div style="padding: 12px; background-color: white; border-radius: 4px; border-left: 3px solid #3498db;">
                                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="checkbox" id="integration-test-checkbox" style="margin-right: 8px; cursor: pointer;" onchange="toggleTestDetails('integration')">
                                    <label for="integration-test-checkbox" style="font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0;">发起集成测试</label>
                                </div>
                                <div id="integration-test-details" style="display: none; margin-left: 24px; padding-top: 10px; border-top: 1px solid #eee;">
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">承接部门 <span style="color: #e74c3c;">*</span></label>
                                            <select id="integration-dept-select" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                                <option value="">请选择</option>
                                                <option value="dept-qa">质量保障部</option>
                                                <option value="dept-test">测试中心</option>
                                                <option value="dept-dev">研发部</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">负责人 <span style="color: #e74c3c;">*</span></label>
                                            <input type="text" id="integration-leader-input" placeholder="请输入负责人" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 系统测试 -->
                            <div style="padding: 12px; background-color: white; border-radius: 4px; border-left: 3px solid #9b59b6;">
                                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="checkbox" id="system-test-checkbox" style="margin-right: 8px; cursor: pointer;" onchange="toggleTestDetails('system')">
                                    <label for="system-test-checkbox" style="font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0;">发起系统测试</label>
                                </div>
                                <div id="system-test-details" style="display: none; margin-left: 24px; padding-top: 10px; border-top: 1px solid #eee;">
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">承接部门 <span style="color: #e74c3c;">*</span></label>
                                            <select id="system-dept-select" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                                <option value="">请选择</option>
                                                <option value="dept-qa">质量保障部</option>
                                                <option value="dept-test">测试中心</option>
                                                <option value="dept-system">系统部</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">负责人 <span style="color: #e74c3c;">*</span></label>
                                            <input type="text" id="system-leader-input" placeholder="请输入负责人" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 安全测试 -->
                            <div style="padding: 12px; background-color: white; border-radius: 4px; border-left: 3px solid #e74c3c;">
                                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="checkbox" id="security-test-checkbox" style="margin-right: 8px; cursor: pointer;" onchange="toggleTestDetails('security')">
                                    <label for="security-test-checkbox" style="font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0;">发起安全测试</label>
                                </div>
                                <div id="security-test-details" style="display: none; margin-left: 24px; padding-top: 10px; border-top: 1px solid #eee;">
                                    <div>
                                        <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">负责人 <span style="color: #e74c3c;">*</span></label>
                                        <input type="text" id="security-leader-input" placeholder="请输入负责人" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 性能测试 -->
                            <div style="padding: 12px; background-color: white; border-radius: 4px; border-left: 3px solid #f39c12;">
                                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="checkbox" id="performance-test-checkbox" style="margin-right: 8px; cursor: pointer;" onchange="toggleTestDetails('performance')">
                                    <label for="performance-test-checkbox" style="font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0;">发起性能测试</label>
                                </div>
                                <div id="performance-test-details" style="display: none; margin-left: 24px; padding-top: 10px; border-top: 1px solid #eee;">
                                    <div>
                                        <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">负责人 <span style="color: #e74c3c;">*</span></label>
                                        <input type="text" id="performance-leader-input" placeholder="请输入负责人" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 业务测试 -->
                            <div style="padding: 12px; background-color: white; border-radius: 4px; border-left: 3px solid #27ae60;">
                                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                    <input type="checkbox" id="business-test-checkbox" style="margin-right: 8px; cursor: pointer;" onchange="toggleTestDetails('business')">
                                    <label for="business-test-checkbox" style="font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0;">发起业务测试</label>
                                </div>
                                <div id="business-test-details" style="display: none; margin-left: 24px; padding-top: 10px; border-top: 1px solid #eee;">
                                    <div>
                                        <label style="display: block; margin-bottom: 5px; color: #666; font-size: 13px;">负责人 <span style="color: #e74c3c;">*</span></label>
                                        <input type="text" id="business-leader-input" placeholder="请输入负责人" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 关联系统信息 -->
                    <div style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0;">
                        <h4 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 16px; font-weight: 600; border-bottom: 2px solid #0066cc; padding-bottom: 8px;">
                            <i class="fa fa-sitemap" style="margin-right: 8px; color: #0066cc;"></i>关联系统信息
                        </h4>
                        <div id="related-systems-list" style="display: grid; gap: 10px;">
                            <!-- 系统条目将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <!-- 解决方案在线文档 -->
                    <div style="margin-bottom: 20px;">
                        <label style="display: block; margin-bottom: 5px; color: #555; font-size: 14px; font-weight: 500;">
                            <i class="fa fa-file-text-o" style="margin-right: 5px; color: #0066cc;"></i>解决方案在线文档 URL
                        </label>
                        <input type="url" id="solution-doc-url" placeholder="请输入文档链接，例如: https://docs.example.com/solution/v1.0.1" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#3498db'" onblur="this.style.borderColor='#ddd'">
                        <small style="color: #999; font-size: 12px; margin-top: 5px; display: block;">默认填充为当前方案评审的解决方案文档版本：solution_2024_07_v1.0.1</small>
                    </div>
                </form>
            </div>
            
            <!-- 模态框底部 -->
            <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; border-top: 1px solid #e0e0e0; background-color: #f9f9f9;">
                <button onclick="closeCreateScheduleModal()" style="padding: 10px 20px; border: 1px solid #ddd; background-color: white; color: #666; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#f5f5f5'" onmouseout="this.style.backgroundColor='white'">取消</button>
                <button onclick="submitCreateSchedule()" style="padding: 10px 20px; border: none; background-color: #0066cc; color: white; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#0052a3'" onmouseout="this.style.backgroundColor='#0066cc'">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 切换领域展开/折叠状态
        function toggleDomain(headerElement) {
            const content = headerElement.nextElementSibling;
            const arrow = headerElement.querySelector('.arrow');
            
            content.classList.toggle('expanded');
            arrow.classList.toggle('expanded');
        }
        
        // 更新已选择活动数量和高亮选择的项
        function updateSelectedCount() {
            // 计算IT4IT活动选择数量
            const checkboxes = document.querySelectorAll('.activity-checkbox');
            let activityCount = 0;
            
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    activityCount++;
                }
            });
            
            // 计算高亮选择的项数量
            const highlightedItems = document.querySelectorAll('.highlighted');
            const totalCount = activityCount + highlightedItems.length;
            
            document.getElementById('selected-count').textContent = totalCount;
        }
        
        // 高亮选择功能初始化
        function initHighlightSelection() {
            const highlightableElements = document.querySelectorAll('.highlightable');
            
            highlightableElements.forEach(element => {
                element.addEventListener('click', function() {
                    this.classList.toggle('highlighted');
                    updateSelectedCount();
                });
            });
        }
        
        // 业务对象选择功能初始化
        function initBusinessObjectSelection() {
            const businessObjectSelects = document.querySelectorAll('.business-object-select');
            
            businessObjectSelects.forEach(select => {
                select.addEventListener('change', function() {
                    const selectedValue = this.value;
                    const row = this.closest('tr');
                    const entityNameCell = row.querySelector('.entity-name');
                    
                    // 如果选择了"添加新业务对象"，则显示输入框
                    if (selectedValue === 'add_new') {
                        const newBusinessObjectName = prompt('请输入新的业务对象名称：');
                        if (newBusinessObjectName) {
                            // 创建新的选项并添加到下拉框
                            const newOption = document.createElement('option');
                            newOption.value = newBusinessObjectName;
                            newOption.textContent = newBusinessObjectName;
                            newOption.selected = true;
                            select.appendChild(newOption);
                            
                            // 提示用户输入新的实体名称
                            const newEntityName = prompt('请输入新的实体名称：');
                            if (newEntityName) {
                                entityNameCell.textContent = newEntityName;
                            }
                        }
                    } else if (selectedValue && entityNameCell) {
                        // 这里可以根据选择的业务对象预填实体名称或显示相关实体列表供选择
                        // 简化版：可以弹出一个对话框让用户选择或输入实体名称
                        const entityName = prompt('请选择或输入实体名称：', entityNameCell.textContent);
                        if (entityName) {
                            entityNameCell.textContent = entityName;
                        }
                    }
                });
            });
        }
        
        // 初始化所有功能
        function initAllFeatures() {
            // 初始化高亮选择功能
            initHighlightSelection();
            
            // 初始化业务对象选择功能
            initBusinessObjectSelection();
        }
        
        // 切换选项卡
        function switchTab(tabElement) {
            // 移除所有选项卡的活动状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 隐藏所有选项卡内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 设置当前选项卡为活动状态
            tabElement.classList.add('active');
            
            // 显示对应的选项卡内容
            const tabId = tabElement.getAttribute('data-tab');
            document.getElementById(`${tabId}-content`).classList.add('active');
        }
        
        // 提交拣选结果
        function submitSelection() {
            const checkboxes = document.querySelectorAll('.activity-checkbox');
            const selectedActivities = [];
            
            // 收集IT4IT业务模型拣选结果
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    const activityName = checkbox.nextElementSibling.textContent;
                    const activityId = checkbox.nextElementSibling.nextElementSibling.textContent;
                    selectedActivities.push({
                        name: activityName,
                        id: activityId
                    });
                }
            });
            
            // 收集高亮选择项
            const selectedHighlights = {
                dataEntities: [],
                dataRelationships: [],
                dataFlows: [],
                dataSecurityItems: [],
                dataMigrationItems: [],
                dataLifecycleStages: []
            };
            
            // 收集数据实体和关系
            document.querySelectorAll('.data-entity-box.highlighted').forEach(entity => {
                selectedHighlights.dataEntities.push(entity.textContent.trim());
            });
            
            document.querySelectorAll('.data-relationship.highlighted').forEach(relationship => {
                selectedHighlights.dataRelationships.push(relationship.textContent.trim());
            });
            
            // 收集数据流节点
            document.querySelectorAll('.data-flow-node.highlighted').forEach(node => {
                selectedHighlights.dataFlows.push(node.textContent.trim());
            });
            
            // 收集数据安全性项
            document.querySelectorAll('.data-security-item.highlighted').forEach(item => {
                selectedHighlights.dataSecurityItems.push(item.textContent.trim());
            });
            
            // 收集数据迁移项
            document.querySelectorAll('.data-migration-item.highlighted').forEach(item => {
                selectedHighlights.dataMigrationItems.push(item.textContent.trim());
            });
            
            // 收集数据生命周期阶段
            document.querySelectorAll('.data-lifecycle-stage.highlighted').forEach(stage => {
                selectedHighlights.dataLifecycleStages.push(stage.textContent.trim());
            });
            
            // 收集选中的应用组件
            const selectedComponents = getSelectedComponents();
            
            // 收集选中的业务组件
            const selectedBusinessComponents = getSelectedBusinessComponents();
            
            // 收集架构备注信息
            const architectureNotes = {
                business: document.getElementById('business-notes').value,
                application: document.getElementById('application-notes').value,
                data: document.getElementById('data-notes').value,
                technology: document.getElementById('technology-notes').value,
                security: document.getElementById('security-notes').value
            };
            
            // 收集筛选条件
            const architectureFilters = {
                business: document.getElementById('business-filter').value,
                application: document.getElementById('application-filter').value,
                data: document.getElementById('data-filter').value,
                technology: document.getElementById('technology-filter').value,
                security: document.getElementById('security-filter').value
            };
            
            // 构建提交信息
            let message = '';
            
            if (selectedActivities.length > 0) {
                message += `已拣选 ${selectedActivities.length} 个IT4IT活动：\n`;
                message += selectedActivities.map(a => `  • ${a.name} (${a.id})`).join('\n');
                message += '\n\n';
            }
            
            // 检查是否有选中的应用组件
            if (selectedComponents.length > 0) {
                message += `已拣选 ${selectedComponents.length} 个应用组件：\n`;
                // 按层次分组显示
                const componentsByLayer = {};
                selectedComponents.forEach(component => {
                    if (!componentsByLayer[component.layer]) {
                        componentsByLayer[component.layer] = [];
                    }
                    componentsByLayer[component.layer].push(component);
                });
                
                // 添加每个层次的组件
                for (const [layer, components] of Object.entries(componentsByLayer)) {
                    message += `  ${layer}：\n`;
                    components.forEach(component => {
                        message += `    • ${component.name} (${component.type})\n`;
                    });
                }
                message += '\n';
            }
            
            // 检查是否有选中的业务组件
            if (selectedBusinessComponents.length > 0) {
                message += `已拣选 ${selectedBusinessComponents.length} 个业务组件：\n`;
                // 按组件组分组显示
                const componentsByGroup = {};
                selectedBusinessComponents.forEach(component => {
                    if (!componentsByGroup[component.group]) {
                        componentsByGroup[component.group] = [];
                    }
                    componentsByGroup[component.group].push(component);
                });
                
                // 添加每个组件组的组件
                for (const [group, components] of Object.entries(componentsByGroup)) {
                    message += `  ${group}：\n`;
                    components.forEach(component => {
                        message += `    • ${component.name}\n`;
                    });
                }
                message += '\n';
            }
            
            // 检查是否有架构备注
            let hasArchitectureNotes = false;
            for (const [key, value] of Object.entries(architectureNotes)) {
                if (value.trim() !== '') {
                    if (!hasArchitectureNotes) {
                        message += "架构备注信息：\n";
                        hasArchitectureNotes = true;
                    }
                    message += `  • ${getArchitectureName(key)}: ${value}\n`;
                }
            }
            
            // 检查是否有筛选条件
            let hasFilters = false;
            for (const [key, value] of Object.entries(architectureFilters)) {
                if (value !== 'all') {
                    if (!hasFilters) {
                        message += "\n架构筛选条件：\n";
                        hasFilters = true;
                    }
                    message += `  • ${getArchitectureName(key)}: ${getFilterLabel(key, value)}\n`;
                }
            }
            
            if (message === '') {
                alert('请至少选择一个活动、组件或添加架构备注！');
                return;
            }
            
            alert(`提交成功！\n\n${message}`);
            
            // 在实际应用中，这里会发送数据到服务器
            console.log('提交的拣选活动：', selectedActivities);
            console.log('提交的拣选应用组件：', selectedComponents);
            console.log('提交的拣选业务组件：', selectedBusinessComponents);
            console.log('架构备注：', architectureNotes);
            console.log('架构筛选条件：', architectureFilters);
        }
        
        // 获取架构名称
        function getArchitectureName(key) {
            const names = {
                business: '业务架构',
                application: '应用架构',
                data: '数据架构',
                technology: '技术架构',
                security: '安全架构'
            };
            return names[key] || key;
        }
        
        // 获取筛选条件标签
        function getFilterLabel(architecture, value) {
            const labels = {
                business: {
                    core: '核心业务组件',
                    support: '支持业务组件',
                    management: '管理业务组件'
                },
                application: {
                    all: '全部组件',
                    access: '接入层',
                    ui: '用户交互层',
                    application: '应用服务层',
                    'data-service': '数据服务层',
                    'data-storage': '数据存储层',
                    infrastructure: '基础设施层',
                    devops: 'DevOps工具链'
                },
                data: {
                    master: '主数据',
                    transaction: '交易数据',
                    reference: '参考数据'
                },
                technology: {
                    infrastructure: '基础设施',
                    platform: '平台服务',
                    middleware: '中间件'
                },
                security: {
                    access: '访问控制',
                    encryption: '加密机制',
                    audit: '审计监控'
                }
            };
            
            return labels[architecture] && labels[architecture][value] ? labels[architecture][value] : value;
        }
        
        // 应用架构筛选功能
        function applyApplicationFilter(filterValue) {
            const allLayers = document.querySelectorAll('.architecture-layer');
            
            allLayers.forEach(layer => {
                // 默认为显示
                layer.style.display = 'flex';
                
                // 根据筛选条件隐藏不需要的层
                if (filterValue !== 'all') {
                    const layerTitle = layer.querySelector('.layer-title').textContent;
                    
                    if (filterValue === 'access' && layerTitle !== '接入层') {
                        layer.style.display = 'none';
                    } else if (filterValue === 'ui' && layerTitle !== '用户交互层') {
                        layer.style.display = 'none';
                    } else if (filterValue === 'application' && layerTitle !== '应用服务层') {
                        layer.style.display = 'none';
                    } else if (filterValue === 'data-service' && layerTitle !== '数据服务层') {
                        layer.style.display = 'none';
                    } else if (filterValue === 'data-storage' && layerTitle !== '数据存储层') {
                        layer.style.display = 'none';
                    } else if (filterValue === 'infrastructure' && layerTitle !== '基础设施层') {
                        layer.style.display = 'none';
                    } else if (filterValue === 'devops') {
                        // 特别处理DevOps工具链筛选
                        if (layerTitle !== '应用服务层' && layerTitle !== '基础设施层') {
                            layer.style.display = 'none';
                        }
                    }
                }
            });
            
            // 处理连接器的显示
            const connectors = document.querySelectorAll('.layer-connector');
            const visibleLayers = Array.from(allLayers).filter(layer => layer.style.display !== 'none');
            
            if (visibleLayers.length <= 1) {
                // 如果只有一层或没有层可见，隐藏所有连接器
                connectors.forEach(connector => connector.style.display = 'none');
            } else {
                // 根据相邻层的可见性决定连接器的显示
                connectors.forEach((connector, index) => {
                    const prevLayer = allLayers[index];
                    const nextLayer = allLayers[index + 1];
                    
                    if (prevLayer.style.display !== 'none' && nextLayer.style.display !== 'none') {
                        connector.style.display = 'block';
                    } else {
                        connector.style.display = 'none';
                    }
                });
            }
        }
        
        // 初始化应用组件点击事件
        function initComponentSelection() {
            // 为所有应用组件添加点击事件
            const components = document.querySelectorAll('.component');
            components.forEach(component => {
                component.addEventListener('click', function() {
                    // 切换选中状态
                    this.classList.toggle('selected');
                });
            });
        }
        
        // 顶部导航区域交互功能
        function toggleNavSection(sectionType) {
            const navContent = document.getElementById('nav-content');
            const demandSections = document.querySelectorAll('[id*="-section"]');
            const buttons = document.querySelectorAll('.toggle-btn');
            
            // 重置所有按钮状态
            buttons.forEach(btn => btn.classList.remove('active'));
            
            if (sectionType === 'all') {
                // 全部展开
                navContent.classList.add('expanded');
                navContent.classList.remove('collapsed');
                demandSections.forEach(section => section.style.display = 'block');
                const allBtn = document.querySelector('[onclick*="all"]');
                if (allBtn) allBtn.classList.add('active');
            } else {
                // 先隐藏所有区域
                demandSections.forEach(section => section.style.display = 'none');
                
                if (sectionType === 'demand') {
                    // 显示需求信息区域
                    const demandSection = document.getElementById('demand-section');
                    if (demandSection) demandSection.style.display = 'block';
                    const demandBtn = document.querySelector('[onclick*="demand"]');
                    if (demandBtn) demandBtn.classList.add('active');
                } else if (sectionType === 'attachments') {
                    // 显示附件清单区域
                    const attachmentsSection = document.getElementById('attachments-section');
                    if (attachmentsSection) attachmentsSection.style.display = 'block';
                    const attachmentsBtn = document.querySelector('[onclick*="attachments"]');
                    if (attachmentsBtn) attachmentsBtn.classList.add('active');
                } else if (sectionType === 'nfr') {
                    // 显示非功能性需求区域
                    const nfrSection = document.getElementById('nfr-section');
                    if (nfrSection) nfrSection.style.display = 'block';
                    const nfrBtn = document.querySelector('[onclick*="nfr"]');
                    if (nfrBtn) nfrBtn.classList.add('active');
                }
                
                // 展开导航内容
                navContent.classList.add('expanded');
                navContent.classList.remove('collapsed');
            }
        }
        
        // 获取选中的应用组件
        function getSelectedComponents() {
            const selectedComponents = [];
            const selectedElements = document.querySelectorAll('.component.selected, .sub-component.selected');
            
            selectedElements.forEach(element => {
                const componentName = element.textContent.trim();
                // 获取组件所属的层
                const layerElement = element.closest('.architecture-layer');
                const layerName = layerElement ? layerElement.querySelector('.layer-title').textContent : '未知层';
                
                selectedComponents.push({
                    name: componentName,
                    layer: layerName,
                    type: element.classList.contains('sub-component') ? '子组件' : '组件'
                });
            });
            
            return selectedComponents;
        }
        
        // 初始化业务组件点击事件
        function initBusinessComponentSelection() {
            // 为所有业务组件添加点击事件
            document.querySelectorAll('.business-component').forEach(component => {
                component.addEventListener('click', function() {
                    // 切换选中状态
                    this.classList.toggle('selected');
                });
            });
        }
        
        // 获取选中的业务组件
        function getSelectedBusinessComponents() {
            const selectedComponents = [];
            const selectedElements = document.querySelectorAll('.business-component.selected');
            
            selectedElements.forEach(element => {
                const componentName = element.textContent.trim();
                // 获取组件所属的组
                const groupElement = element.closest('.business-component-group');
                const groupName = groupElement ? groupElement.querySelector('.business-component-title').textContent : '未知组';
                
                selectedComponents.push({
                    name: componentName,
                    group: groupName
                });
            });
            
            return selectedComponents;
        }
        
        // 业务架构筛选功能
        function applyBusinessFilter(filterValue) {
            const allComponents = document.querySelectorAll('.business-component');
            
            // 根据筛选条件控制组件显示
            allComponents.forEach(component => {
                if (filterValue === 'all') {
                    component.style.display = 'block';
                } else {
                    // 根据选择的业务组件名称筛选
                    const componentName = component.textContent.trim().split('\n')[0].trim();
                    component.style.display = componentName === filterValue ? 'block' : 'none';
                }
            });
        }
        
        // 初始化所有功能
        function initAllFeatures() {
            // 初始化选项卡功能
            initTabSwitching();
            
            // 初始化域展开/折叠功能
            initDomainToggle();
            
            // 初始化选中数量统计
            updateSelectedCount();
        }
        
        // 初始化选项卡切换
        function initTabSwitching() {
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    switchTab(this);
                });
            });
        }
        
        // 初始化域展开/折叠
        function initDomainToggle() {
            // 默认展开第一个域
            const firstDomain = document.querySelector('.domain-section .domain-content');
            if (firstDomain) {
                firstDomain.classList.add('expanded');
            }
        }
        
        // 切换选项卡
        function switchTab(tabElement) {
            // 移除所有活跃状态
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            
            // 激活点击的选项卡
            tabElement.classList.add('active');
            
            // 获取对应的内容
            const tabId = tabElement.getAttribute('data-tab');
            const tabContent = document.getElementById(tabId + '-content');
            if (tabContent) {
                tabContent.classList.add('active');
            }
        }
        
        // 切换域的展开/折叠状态
        function toggleDomain(headerElement) {
            const domainContent = headerElement.nextElementSibling;
            const arrow = headerElement.querySelector('.arrow');
            
            if (domainContent.classList.contains('expanded')) {
                domainContent.classList.remove('expanded');
                arrow.classList.remove('expanded');
                arrow.textContent = '▶';
            } else {
                domainContent.classList.add('expanded');
                arrow.classList.add('expanded');
                arrow.textContent = '▼';
            }
        }
        
        // 更新已选择数量
        function updateSelectedCount() {
            const selectedActivities = document.querySelectorAll('.activity-checkbox:checked');
            const selectedCountElement = document.querySelector('.selected-count');
            
            if (selectedCountElement) {
                selectedCountElement.textContent = `已选择: ${selectedActivities.length} 个活动`;
            }
        }
            // 选项卡切换事件
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    switchTab(this);
                });
            });
            
            // IT4IT活动拣选事件
            const checkboxes = document.querySelectorAll('.activity-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateSelectedCount);
            });
            
            // 初始化已选择数量
            updateSelectedCount();
            
            // 应用架构筛选事件监听
            const applicationFilter = document.getElementById('application-filter');
            if (applicationFilter) {
                applicationFilter.addEventListener('change', function() {
                    applyApplicationFilter(this.value);
                });
            }
            
            // 初始化应用架构图显示
            if (applicationFilter) {
                applyApplicationFilter(applicationFilter.value);
            }
            
            // 初始化应用组件选择功能
            initComponentSelection();
            
            // 业务架构筛选事件监听
            const businessFilter = document.getElementById('business-filter');
            if (businessFilter) {
                businessFilter.addEventListener('change', function() {
                    applyBusinessFilter(this.value);
                });
            }
            
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换事件
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    switchTab(this);
                });
            });
            
            // IT4IT活动拣选事件
            const checkboxes = document.querySelectorAll('.activity-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateSelectedCount);
            });
            
            // 初始化已选择数量
            updateSelectedCount();
            
            // 应用架构筛选事件监听
            const applicationFilter = document.getElementById('application-filter');
            if (applicationFilter) {
                applicationFilter.addEventListener('change', function() {
                    applyApplicationFilter(this.value);
                });
            }
            
            // 初始化应用架构图显示
            if (applicationFilter) {
                applyApplicationFilter(applicationFilter.value);
            }
            
            // 初始化应用组件选择功能
            initComponentSelection();
            
            // 业务架构筛选事件监听
            const businessFilter = document.getElementById('business-filter');
            if (businessFilter) {
                businessFilter.addEventListener('change', function() {
                    applyBusinessFilter(this.value);
                });
            }
            
            // 初始化业务架构显示
            if (businessFilter) {
                applyBusinessFilter(businessFilter.value);
            }
            
            // 初始化业务组件选择功能
            initBusinessComponentSelection();
            
            // 初始化应用上下文关系图选择功能
            initApplicationContextSelection();
            
            // 初始化应用上下文关系图筛选功能
            const contextFilter = document.getElementById('context-filter');
            if (contextFilter) {
                contextFilter.addEventListener('change', function() {
                    applyContextFilter(this.value);
                });
                applyContextFilter(contextFilter.value);
            }
        });
        
        // 树型节点展开/折叠功能
        function toggleTreeNode(element) {
            const treeNode = element.parentElement;
            const treeChildren = treeNode.querySelector('.tree-children');
            const toggleIcon = element.querySelector('.toggle-icon');
            
            if (treeChildren.style.display === 'block') {
                treeChildren.style.display = 'none';
                toggleIcon.textContent = '▶';
            } else {
                treeChildren.style.display = 'block';
                toggleIcon.textContent = '▼';
            }
        }
        
        // 清单项拣选功能（黄色背景）
        function toggleListItem(element) {
            element.classList.toggle('selected');
        }
        
        // 初始化应用上下文关系图选择功能
        function initApplicationContextSelection() {
            // 为所有上下文组件添加点击事件
            document.querySelectorAll('.context-component').forEach(component => {
                component.addEventListener('click', function() {
                    // 切换选中状态
                    this.classList.toggle('selected');
                });
            });
        }
        
        // 应用上下文关系图筛选功能
        function applyContextFilter(filterValue) {
            const allComponents = document.querySelectorAll('.context-component');
            const allConnectors = document.querySelectorAll('.connector-line, .vertical-connectors');
            const customConnectors = document.querySelectorAll('.custom-connector');
            
            // 显示全部组件和连接线
            allComponents.forEach(component => {
                component.style.display = 'block';
            });
            
            allConnectors.forEach(connector => {
                connector.style.display = 'block';
            });
            
            customConnectors.forEach(connector => {
                connector.style.display = 'block';
            });
            
            // 如果有筛选条件，则根据条件筛选
            if (filterValue === 'internal') {
                // 内部调用关系：只显示业务系统、产品服务层、业务中台之间的连接
                const externalComponents = document.querySelectorAll(
                    '.context-section:nth-child(7) .context-component, .context-section:nth-child(9) .context-component'
                );
                
                externalComponents.forEach(component => {
                    component.style.display = 'none';
                });
                
                // 隐藏与外部系统的连接线
                const externalConnectors = document.querySelectorAll(
                    '.vertical-connectors:nth-child(6), .vertical-connectors:nth-child(8)'
                );
                
                externalConnectors.forEach(connector => {
                    connector.style.display = 'none';
                });
            } else if (filterValue === 'external') {
                // 外部依赖关系：只显示与外部系统的连接
                const internalComponents = document.querySelectorAll(
                    '.context-section:nth-child(1) .context-component, .context-section:nth-child(3) .context-component, .context-section:nth-child(5) .context-component'
                );
                
                internalComponents.forEach(component => {
                    component.style.display = 'none';
                });
                
                // 只显示与外部系统的连接线
                const internalConnectors = document.querySelectorAll(
                    '.vertical-connectors:nth-child(2), .vertical-connectors:nth-child(4), .vertical-connectors:nth-child(6), .vertical-connectors:nth-child(8)'
                );
                
                // 只显示最后一个连接线（管理分析层到外联服务层）
                internalConnectors.forEach((connector, index) => {
                    if (index !== internalConnectors.length - 1) {
                        connector.style.display = 'none';
                    }
                });
            }
        }
        
        // 创建自定义关联关系功能
        let customRelations = [];
        let selectedSourceApp = null;
        let selectedTargetApp = null;
        
        // 初始化创建关联关系功能
        function initRelationCreation() {
            // 填充应用下拉列表
            const sourceAppSelect = document.getElementById('source-app');
            const targetAppSelect = document.getElementById('target-app');
            const contextComponents = document.querySelectorAll('.context-component');
            
            contextComponents.forEach(component => {
                const appName = component.textContent.trim();
                const sectionName = component.closest('.context-section').querySelector('.section-title').textContent;
                const optionText = `${sectionName} - ${appName}`;
                
                // 为源应用和目标应用创建选项
                const sourceOption = document.createElement('option');
                sourceOption.value = appName;
                sourceOption.textContent = optionText;
                sourceAppSelect.appendChild(sourceOption);
                
                const targetOption = document.createElement('option');
                targetOption.value = appName;
                targetOption.textContent = optionText;
                targetAppSelect.appendChild(targetOption);
            });
            
            // 创建关联关系按钮事件
            document.getElementById('add-relation-btn').addEventListener('click', function() {
                document.getElementById('relation-modal').style.display = 'flex';
                document.getElementById('relation-desc').value = '';
            });
            
            // 取消创建关联关系
            document.getElementById('cancel-relation-btn').addEventListener('click', function() {
                document.getElementById('relation-modal').style.display = 'none';
            });
            
            // 确认创建关联关系
            document.getElementById('confirm-relation-btn').addEventListener('click', function() {
                const sourceApp = document.getElementById('source-app').value;
                const targetApp = document.getElementById('target-app').value;
                const relationDesc = document.getElementById('relation-desc').value;
                
                if (sourceApp === targetApp) {
                    alert('源应用和目标应用不能相同！');
                    return;
                }
                
                if (!relationDesc.trim()) {
                    alert('请输入关系描述！');
                    return;
                }
                
                // 创建新的关联关系
                addCustomRelation(sourceApp, targetApp, relationDesc);
                
                // 关闭弹窗
                document.getElementById('relation-modal').style.display = 'none';
            });
            
            // 点击模态框背景关闭弹窗
            document.getElementById('relation-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    this.style.display = 'none';
                }
            });
        }
        
        // 添加自定义关联关系
        function addCustomRelation(sourceApp, targetApp, relationDesc) {
            // 生成唯一ID
            const relationId = 'relation_' + Date.now();
            
            // 存储关联关系
            customRelations.push({
                id: relationId,
                source: sourceApp,
                target: targetApp,
                description: relationDesc
            });
            
            // 添加连接线
            drawCustomConnector(sourceApp, targetApp, relationId);
            
            // 更新关联关系列表
            updateRelationList();
        }
        
        // 绘制自定义连接线
        function drawCustomConnector(sourceApp, targetApp, relationId) {
            const sourceElement = Array.from(document.querySelectorAll('.context-component')).find(el => 
                el.textContent.trim() === sourceApp
            );
            const targetElement = Array.from(document.querySelectorAll('.context-component')).find(el => 
                el.textContent.trim() === targetApp
            );
            
            if (!sourceElement || !targetElement) return;
            
            const diagram = document.querySelector('.application-context-diagram');
            const sourceRect = sourceElement.getBoundingClientRect();
            const targetRect = targetElement.getBoundingClientRect();
            const diagramRect = diagram.getBoundingClientRect();
            
            // 计算相对位置
            const sourceX = sourceRect.left - diagramRect.left + sourceRect.width / 2;
            const sourceY = sourceRect.top - diagramRect.top + sourceRect.height / 2;
            const targetX = targetRect.left - diagramRect.left + targetRect.width / 2;
            const targetY = targetRect.top - diagramRect.top + targetRect.height / 2;
            
            // 计算连线角度和长度
            const dx = targetX - sourceX;
            const dy = targetY - sourceY;
            const angle = Math.atan2(dy, dx) * 180 / Math.PI;
            const length = Math.sqrt(dx * dx + dy * dy);
            
            // 创建连接线元素
            const connector = document.createElement('div');
            connector.className = 'custom-connector';
            connector.id = relationId;
            connector.style.left = sourceX + 'px';
            connector.style.top = sourceY + 'px';
            connector.style.width = length + 'px';
            connector.style.transform = `rotate(${angle}deg)`;
            connector.style.transformOrigin = '0 50%';
            connector.style.setProperty('--arrow-rotation', angle + 'deg');
            
            // 确保箭头指向正确的方向
            connector.style.setProperty('--arrow-rotation', angle + 'deg');
            
            // 添加到图表中
            diagram.appendChild(connector);
        }
        
        // 更新关联关系列表
        function updateRelationList() {
            const relationList = document.getElementById('relation-list');
            relationList.innerHTML = '';
            
            customRelations.forEach(relation => {
                const relationItem = document.createElement('div');
                relationItem.className = 'relation-item';
                
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'delete-relation-btn';
                deleteBtn.textContent = '删除';
                deleteBtn.onclick = function() {
                    deleteCustomRelation(relation.id);
                };
                
                const relationText = document.createElement('div');
                relationText.innerHTML = `<strong>${relation.source}</strong> → <strong>${relation.target}</strong>`;
                
                const relationDesc = document.createElement('div');
                relationDesc.className = 'relation-desc';
                relationDesc.textContent = relation.description;
                
                relationItem.appendChild(deleteBtn);
                relationItem.appendChild(relationText);
                relationItem.appendChild(relationDesc);
                
                relationList.appendChild(relationItem);
            });
        }
        
        // 删除自定义关联关系
        function deleteCustomRelation(relationId) {
            // 从数组中移除
            customRelations = customRelations.filter(relation => relation.id !== relationId);
            
            // 从DOM中移除连接线
            const connector = document.getElementById(relationId);
            if (connector) {
                connector.remove();
            }
            
            // 更新列表
            updateRelationList();
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化应用上下文选择功能
            initApplicationContextSelection();
            
            // 初始化关联关系创建功能
            initRelationCreation();
            
            // 初始化数据架构筛选功能
            initDataArchitectureFilter();
            
            // 初始化高亮选择和业务对象选择功能
            initAllFeatures();
            
            // 初始化技术架构相关功能
            initComponentSelection();
            initTechnologyArchitectureFeatures();
            
            // 初始化安全架构相关功能
            initSecurityArchitectureFeatures();
            
            // 任务详情模态对话框事件监听
            const taskModal = document.getElementById('taskDetailModal');
            if (taskModal) {
                taskModal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        closeTaskDetail();
                    }
                });
            }
            
            // 解决方案文档模态对话框事件监听
            const solutionModal = document.getElementById('solutionDocModal');
            if (solutionModal) {
                solutionModal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        closeSolutionDocumentModal();
                    }
                });
            }
        });

// 技术架构相关功能
function initTechnologyArchitectureFeatures() {
  // 初始化系统维度筛选
  initSystemFilter();
  
  // 初始化架构分层筛选
  initLayerFilter();
  
  // 初始化技术组件点击高亮功能
  initComponentClickHighlight();
}

// 安全架构相关功能
function initSecurityArchitectureFeatures() {
  // 初始化安全系统维度筛选
  initSecuritySystemFilter();
  
  // 初始化安全领域筛选
  initSecurityDomainFilter();
  
  // 初始化安全组件点击高亮功能
  initSecurityComponentClickHighlight();
}

// 安全系统维度筛选功能
function initSecuritySystemFilter() {
  const securitySystemFilter = document.getElementById('security-system-filter');
  if (securitySystemFilter) {
    securitySystemFilter.addEventListener('change', function() {
      applySecuritySystemFilter(this.value);
    });
  }
}

function applySecuritySystemFilter(systemValue) {
  // 这里实现根据系统筛选安全组件的逻辑
  console.log('应用安全系统筛选:', systemValue);
}

// 安全领域筛选功能
function initSecurityDomainFilter() {
  const securityDomainCheckboxes = document.querySelectorAll('.security-domain-checkbox');
  securityDomainCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      applySecurityDomainFilter();
    });
  });
}

function applySecurityDomainFilter() {
  const securityDomainCheckboxes = document.querySelectorAll('.security-domain-checkbox');
  const allCheckbox = document.querySelector('.security-domain-checkbox[value="all"]');
  const selectedDomains = [];
  
  // 检查是否勾选了全部领域
  if (allCheckbox.checked) {
    securityDomainCheckboxes.forEach(checkbox => {
      if (checkbox.value !== 'all') {
        checkbox.checked = true;
        selectedDomains.push(checkbox.value);
      }
    });
  } else {
    securityDomainCheckboxes.forEach(checkbox => {
      if (checkbox.checked && checkbox.value !== 'all') {
        selectedDomains.push(checkbox.value);
      }
    });
  }
  
  // 应用领域筛选
  const securityLayers = document.querySelectorAll('#security-content .architecture-layer');
  securityLayers.forEach(layer => {
    const layerId = layer.getAttribute('data-layer');
    if (selectedDomains.includes(layerId)) {
      layer.style.display = 'block';
    } else {
      layer.style.display = 'none';
    }
  });
}

// 安全组件点击高亮功能
function initSecurityComponentClickHighlight() {
  const securityComponents = document.querySelectorAll('#security-content .component.highlightable');
  securityComponents.forEach(component => {
    component.addEventListener('click', function() {
      // 只有未标黄的组件才能点击高亮为红色
      if (!this.style.backgroundColor || this.style.backgroundColor !== 'rgb(255, 249, 196)') {
        this.classList.toggle('highlighted');
        updateSelectedCount();
      }
    });
  });
}

// 显示更新安全组件模态框
function showUpdateSecurityReasonModal() {
  document.getElementById('update-reason-modal').style.display = 'block';
}

// 更新安全组件
function updateSecurityComponents() {
  const reason = document.getElementById('update-reason').value;
  if (!reason.trim()) {
    alert('请输入更新安全组件的理由！');
    return;
  }
  
  // 随机选择一些组件标记为黄色（已采用）
  const securityComponents = document.querySelectorAll('#security-content .component.highlightable');
  const totalComponents = securityComponents.length;
  const componentsToUpdate = Math.floor(totalComponents * 0.3); // 更新约30%的组件
  
  // 先清除所有黄色标记
  securityComponents.forEach(component => {
    if (component.classList.contains('highlighted')) {
      component.classList.remove('highlighted');
    } else {
      component.style.backgroundColor = '';
    }
  });
  
  // 随机标记一些组件为黄色
  const indices = Array.from({length: totalComponents}, (_, i) => i);
  // 洗牌算法
  for (let i = indices.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [indices[i], indices[j]] = [indices[j], indices[i]];
  }
  
  // 选择前N个组件标记为黄色
  for (let i = 0; i < componentsToUpdate; i++) {
    securityComponents[indices[i]].style.backgroundColor = '#fff9c4';
  }
  
  // 关闭模态框
  closeUpdateReasonModal();
  
  // 显示成功提示
  alert('安全组件已更新！更新理由：' + reason);
}

// 系统维度筛选功能
function initSystemFilter() {
  const systemFilter = document.getElementById('system-filter');
  if (systemFilter) {
    systemFilter.addEventListener('change', function() {
      applySystemFilter(this.value);
    });
  }
}

function applySystemFilter(systemValue) {
  // 这里实现根据系统筛选技术组件的逻辑
  // 由于无法读取Excel数据，这里仅提供框架
  console.log('应用系统筛选:', systemValue);
}

// 架构分层筛选功能
function initLayerFilter() {
  const layerCheckboxes = document.querySelectorAll('.layer-checkbox');
  layerCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      applyLayerFilter();
    });
  });
}

function applyLayerFilter() {
  const layerCheckboxes = document.querySelectorAll('.layer-checkbox');
  const allCheckbox = document.querySelector('.layer-checkbox[value="all"]');
  const selectedLayers = [];
  
  // 检查是否勾选了全部层级
  if (allCheckbox.checked) {
    layerCheckboxes.forEach(checkbox => {
      if (checkbox.value !== 'all') {
        checkbox.checked = true;
        selectedLayers.push(checkbox.value);
      }
    });
  } else {
    layerCheckboxes.forEach(checkbox => {
      if (checkbox.checked && checkbox.value !== 'all') {
        selectedLayers.push(checkbox.value);
      }
    });
  }
  
  // 应用层级筛选
  const architectureLayers = document.querySelectorAll('.architecture-layer');
  architectureLayers.forEach(layer => {
    const layerId = layer.getAttribute('data-layer');
    if (selectedLayers.includes(layerId)) {
      layer.style.display = 'block';
    } else {
      layer.style.display = 'none';
    }
  });
}

// 技术组件点击高亮功能
function initComponentClickHighlight() {
  const components = document.querySelectorAll('.component.highlightable, .sub-component.highlightable');
  components.forEach(component => {
    component.addEventListener('click', function() {
      // 只有未标黄的组件才能点击高亮为红色
      if (!this.style.backgroundColor || this.style.backgroundColor !== 'rgb(255, 249, 196)') {
        this.classList.toggle('highlighted');
        updateSelectedCount();
      }
    });
  });
}

// 显示更新技术组件模态框
function showUpdateReasonModal() {
  document.getElementById('update-reason-modal').style.display = 'block';
}

// 关闭更新技术组件模态框
function closeUpdateReasonModal() {
  document.getElementById('update-reason-modal').style.display = 'none';
  document.getElementById('update-reason').value = '';
}

// 更新技术组件
function updateTechnologyComponents() {
  const reason = document.getElementById('update-reason').value;
  if (!reason.trim()) {
    alert('请输入更新技术组件的理由！');
    return;
  }
  
  // 随机选择一些组件标记为黄色（已采用）
  const components = document.querySelectorAll('.component.highlightable, .sub-component.highlightable');
  const totalComponents = components.length;
  const componentsToUpdate = Math.floor(totalComponents * 0.3); // 更新约30%的组件
  
  // 先清除所有黄色标记
  components.forEach(component => {
    if (component.classList.contains('highlighted')) {
      component.classList.remove('highlighted');
    } else {
      component.style.backgroundColor = '';
    }
  });
  
  // 随机标记一些组件为黄色
  const indices = Array.from({length: totalComponents}, (_, i) => i);
  // 洗牌算法
  for (let i = indices.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [indices[i], indices[j]] = [indices[j], indices[i]];
  }
  
  // 选择前N个组件标记为黄色
  for (let i = 0; i < componentsToUpdate; i++) {
    components[indices[i]].style.backgroundColor = '#fff9c4';
  }
  
  // 关闭模态框
  closeUpdateReasonModal();
  
  // 显示成功提示
  alert('技术组件已更新！更新理由：' + reason);
}

// 初始化技术组件选择功能
function initComponentSelection() {
  // 这里可以添加初始化技术组件选择的代码
  console.log('技术组件选择功能已初始化');
}

// 切换工作流程图显示/隐藏
function toggleWorkflow(workflowId) {
  const workflowContainer = document.getElementById(workflowId);
  if (workflowContainer) {
    workflowContainer.style.display = workflowContainer.style.display === 'none' || workflowContainer.style.display === '' ? 'block' : 'none';
  }
}

// 数据架构筛选功能
  function initDataArchitectureFilter() {
    const dataFilter = document.getElementById('data-filter');
    if (dataFilter) {
      dataFilter.addEventListener('change', function() {
        applyDataFilter(this.value);
      });
      
      // 默认应用全部筛选
      applyDataFilter('all');
    }
  }
  
  function applyDataFilter(filterValue) {
    const dataArtifacts = document.querySelectorAll('.data-artifact-card');
    
    dataArtifacts.forEach(artifact => {
      const artifactTitle = artifact.querySelector('.data-artifact-title').textContent;
      
      // 根据筛选条件显示或隐藏数据实体
      if (filterValue === 'all') {
        artifact.style.display = 'block';
      } else if (filterValue === 'master' && (
        artifactTitle.includes('客户信息') || 
        artifactTitle.includes('产品信息') || 
        artifactTitle.includes('账户信息') ||
        artifactTitle.includes('合约信息')
      )) {
        artifact.style.display = 'block';
      } else if (filterValue === 'transaction' && (
        artifactTitle.includes('交易') || 
        artifactTitle.includes('数据传播') ||
        artifactTitle.includes('数据迁移')
      )) {
        artifact.style.display = 'block';
      } else if (filterValue === 'reference' && (
        artifactTitle.includes('数据实体目录') || 
        artifactTitle.includes('矩阵') || 
        artifactTitle.includes('数据生命周期')
      )) {
        artifact.style.display = 'block';
      } else {        artifact.style.display = 'none';      }    });  }

  // 下载附件功能  function downloadFile(fileName) {    // 在实际应用中，这里会触发真实的文件下载    // 由于是原型演示，我们使用alert模拟下载行为    alert('开始下载文件：' + fileName);    // 实际应用中可能的实现方式：    // window.location.href = 'downloads/' + fileName;  }
  
  // 查看附件功能  function openFile(fileName) {    // 在实际应用中，这里会在新标签页打开文件或显示文件预览    // 由于是原型演示，我们使用alert模拟打开行为    alert('打开文件：' + fileName);    // 实际应用中可能的实现方式：    // window.open('viewfile.html?file=' + encodeURIComponent(fileName), '_blank');  }
  
  // 切换非功能需求关注状态
  function toggleAttention(selectElement) {
    // 获取当前行元素
    const row = selectElement.closest('tr');    
    // 根据选择的值决定是否高亮显示
    if (selectElement.value === 'yes') {
      row.classList.add('attention-highlight');
    } else {
      row.classList.remove('attention-highlight');
    }
  }
  
  // 选择应用组件
  function selectAppComponent(element) {
    // 移除所有组件的选中状态
    const allComponents = document.querySelectorAll('.app-component');
    allComponents.forEach(comp => {
      comp.classList.remove('selected-component');
      comp.style.transform = 'scale(1)';
    });    
    // 为当前点击的组件添加选中状态
    element.classList.add('selected-component');
    element.style.transform = 'scale(1.05)';    
    // 获取组件名称并显示信息
    const componentName = element.textContent.trim();
    alert('您选择了：' + componentName);
  }

  // 显示变更日志弹窗
  function showChangeLogModal(changeType, changeName, changeOwner) {
    const modal = document.getElementById('change-log-modal');
    const modalTitle = document.getElementById('change-log-title');
    const modalContent = document.getElementById('change-log-content');
    
    // 设置弹窗标题
    modalTitle.textContent = `变更日志：${changeName}`;
    
    // 生成模拟的变更日志内容（参考Git变更记录格式）
    const changeLogs = generateChangeLog(changeType, changeName, changeOwner);
    
    // 设置弹窗内容
    modalContent.textContent = changeLogs;
    
    // 显示弹窗
    modal.style.display = 'block';
  }
  
  // 关闭变更日志弹窗
  function closeChangeLogModal() {
    document.getElementById('change-log-modal').style.display = 'none';
  }
  
  // 打开创建排期模态框
  function openCreateScheduleModal(featureId, featureName, expectedDate, systems, priority, workload) {
    const modal = document.getElementById('create-schedule-modal-review');
    
    // 填充表单字段
    document.getElementById('schedule-feature-id').value = featureId;
    document.getElementById('schedule-feature-name').value = featureName;
    document.getElementById('schedule-priority-input').value = priority;
    document.getElementById('schedule-systems-input').value = systems;
    document.getElementById('schedule-workload-input').value = workload;
    
    // 预填排期名称（基于特性名称）
    document.getElementById('schedule-name-input').value = featureName + ' - 排期计划';
    
    // 设置默认日期（开始日期为今天，结束日期为期望投产日期）
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('schedule-start-date').value = today;
    document.getElementById('schedule-end-date').value = expectedDate;
    
    // 根据优先级默认设置排期类型
    const scheduleTypeSelect = document.getElementById('schedule-type-select');
    if (priority === '高') {
      scheduleTypeSelect.value = 'urgent';
    } else {
      scheduleTypeSelect.value = 'single-system';
    }
    
    // 生成关联系统信息
    generateRelatedSystemsList(systems, workload);
    
    // 设置默认解决方案文档URL
    document.getElementById('solution-doc-url').value = 'https://docs.company.com/solution/solution_2024_07_v1.0.1';
    
    // 显示模态框
    modal.style.display = 'block';
  }
  
  // 生成关联系统列表
  function generateRelatedSystemsList(systemsStr, workload) {
    const systemsList = document.getElementById('related-systems-list');
    systemsList.innerHTML = '';
    
    // 解析系统字符串（格式：系统1,系统2）
    const systems = systemsStr.split(',').map(s => s.trim());
    
    // 模拟系统数据（实际项目中应该从后端获取）
    const systemsData = [
      { code: 'IPDO', name: 'IPDO-一体化交付平台', leader: '李四', workload: '1.5 人月' },
      { code: 'MDDD', name: 'MDDD-模型资产管控平台', leader: '王五', workload: '2.0 人月' },
      { code: 'SSOD', name: 'SSOD-单点登录平台', leader: '赵六', workload: '1.0 人月' },
      { code: 'SDPD', name: 'SDPD-安全数据防护系统', leader: '孙七', workload: '2.0 人月' }
    ];
    
    // 根据系统名称生成条目
    systems.forEach((systemName, index) => {
      // 查找匹配的系统数据
      const systemData = systemsData.find(s => systemName.includes(s.code)) || {
        code: 'SYS' + (index + 1),
        name: systemName,
        leader: '待分配',
        workload: '1.0 人月'
      };
      
      const systemItem = document.createElement('div');
      systemItem.style.cssText = 'display: grid; grid-template-columns: 100px 1fr 120px 100px; gap: 10px; padding: 12px; background-color: white; border-radius: 4px; border: 1px solid #e0e0e0; align-items: center;';
      
      systemItem.innerHTML = `
        <div style="text-align: center;">
          <span style="display: inline-block; padding: 4px 8px; background-color: #0066cc; color: white; border-radius: 4px; font-weight: 600; font-size: 12px;">${systemData.code}</span>
        </div>
        <div style="color: #2c3e50; font-weight: 500; font-size: 14px;">${systemData.name}</div>
        <div style="color: #666; font-size: 13px;">
          <i class="fa fa-user" style="margin-right: 5px; color: #0066cc;"></i>${systemData.leader}
        </div>
        <div style="color: #666; font-size: 13px; text-align: right;">
          <i class="fa fa-clock-o" style="margin-right: 5px; color: #f39c12;"></i>${systemData.workload}
        </div>
      `;
      
      systemsList.appendChild(systemItem);
    });
    
    // 如果没有系统，显示提示
    if (systems.length === 0 || !systemsStr) {
      systemsList.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无关联系统</div>';
    }
  }
  
  // 切换测试详情显示/隐藏
  function toggleTestDetails(testType) {
    const checkbox = document.getElementById(testType + '-test-checkbox');
    const details = document.getElementById(testType + '-test-details');
    
    if (checkbox.checked) {
      details.style.display = 'block';
    } else {
      details.style.display = 'none';
      // 清空输入字段
      if (testType === 'integration' || testType === 'system') {
        document.getElementById(testType + '-dept-select').value = '';
        document.getElementById(testType + '-leader-input').value = '';
      } else {
        document.getElementById(testType + '-leader-input').value = '';
      }
    }
  }
  
  // 关闭创建排期模态框
  function closeCreateScheduleModal() {
    const modal = document.getElementById('create-schedule-modal-review');
    modal.style.display = 'none';
    
    // 清空表单
    document.getElementById('create-schedule-form-review').reset();
    
    // 清空测试计划选项
    ['integration', 'system', 'security', 'performance', 'business'].forEach(testType => {
      document.getElementById(testType + '-test-checkbox').checked = false;
      document.getElementById(testType + '-test-details').style.display = 'none';
    });
    
    // 清空关联系统列表
    document.getElementById('related-systems-list').innerHTML = '';
  }
  
  // 提交创建排期
  function submitCreateSchedule() {
    const form = document.getElementById('create-schedule-form-review');
    
    // 验证表单
    if (!form.checkValidity()) {
      alert('请填写所有必填字段！');
      return;
    }
    
    // 验证测试计划
    const testPlanValidation = validateTestPlan();
    if (!testPlanValidation.valid) {
      alert(testPlanValidation.message);
      return;
    }
    
    // 获取基本表单数据
    const scheduleData = {
      featureId: document.getElementById('schedule-feature-id').value,
      featureName: document.getElementById('schedule-feature-name').value,
      scheduleName: document.getElementById('schedule-name-input').value,
      scheduleType: document.getElementById('schedule-type-select').value,
      priority: document.getElementById('schedule-priority-input').value,
      startDate: document.getElementById('schedule-start-date').value,
      endDate: document.getElementById('schedule-end-date').value,
      systems: document.getElementById('schedule-systems-input').value,
      workload: document.getElementById('schedule-workload-input').value,
      manager: document.getElementById('schedule-manager-input').value,
      description: document.getElementById('schedule-description-input').value,
      solutionDocUrl: document.getElementById('solution-doc-url').value,
      testPlan: collectTestPlanData()
    };
    
    // 验证日期合理性
    if (new Date(scheduleData.startDate) > new Date(scheduleData.endDate)) {
      alert('开始日期不能晚于结束日期！');
      return;
    }
    
    // 模拟提交到后端
    console.log('创建排期数据：', scheduleData);
    
    // 生成成功消息
    let successMessage = `排期创建成功！\n\n`;
    successMessage += `排期名称：${scheduleData.scheduleName}\n`;
    successMessage += `特性：${scheduleData.featureName}\n`;
    successMessage += `负责人：${scheduleData.manager}\n`;
    successMessage += `开始日期：${scheduleData.startDate}\n`;
    successMessage += `结束日期：${scheduleData.endDate}\n\n`;
    
    // 添加测试计划信息
    if (scheduleData.testPlan.integration.enabled) {
      successMessage += `✓ 集成测试：${scheduleData.testPlan.integration.dept} - ${scheduleData.testPlan.integration.leader}\n`;
    }
    if (scheduleData.testPlan.system.enabled) {
      successMessage += `✓ 系统测试：${scheduleData.testPlan.system.dept} - ${scheduleData.testPlan.system.leader}\n`;
    }
    if (scheduleData.testPlan.security.enabled) {
      successMessage += `✓ 安全测试：${scheduleData.testPlan.security.leader}\n`;
    }
    if (scheduleData.testPlan.performance.enabled) {
      successMessage += `✓ 性能测试：${scheduleData.testPlan.performance.leader}\n`;
    }
    if (scheduleData.testPlan.business.enabled) {
      successMessage += `✓ 业务测试：${scheduleData.testPlan.business.leader}\n`;
    }
    
    successMessage += `\n排期信息已同步到排期管理系统。`;
    
    // 显示成功消息
    alert(successMessage);
    
    // 关闭模态框
    closeCreateScheduleModal();
    
    // 实际项目中这里应该发送AJAX请求到后端
    // 并根据返回结果处理
  }
  
  // 验证测试计划
  function validateTestPlan() {
    const testTypes = [
      { id: 'integration', name: '集成测试', hasDepart: true },
      { id: 'system', name: '系统测试', hasDepart: true },
      { id: 'security', name: '安全测试', hasDepart: false },
      { id: 'performance', name: '性能测试', hasDepart: false },
      { id: 'business', name: '业务测试', hasDepart: false }
    ];
    
    for (const testType of testTypes) {
      const checkbox = document.getElementById(testType.id + '-test-checkbox');
      if (checkbox.checked) {
        // 检查负责人
        const leader = document.getElementById(testType.id + '-leader-input').value;
        if (!leader || leader.trim() === '') {
          return {
            valid: false,
            message: `请填写${testType.name}的负责人！`
          };
        }
        
        // 检查部门（如果需要）
        if (testType.hasDepart) {
          const dept = document.getElementById(testType.id + '-dept-select').value;
          if (!dept || dept === '') {
            return {
              valid: false,
              message: `请选择${testType.name}的承接部门！`
            };
          }
        }
      }
    }
    
    return { valid: true };
  }
  
  // 收集测试计划数据
  function collectTestPlanData() {
    const testPlan = {
      integration: {
        enabled: document.getElementById('integration-test-checkbox').checked,
        dept: document.getElementById('integration-dept-select').value,
        leader: document.getElementById('integration-leader-input').value
      },
      system: {
        enabled: document.getElementById('system-test-checkbox').checked,
        dept: document.getElementById('system-dept-select').value,
        leader: document.getElementById('system-leader-input').value
      },
      security: {
        enabled: document.getElementById('security-test-checkbox').checked,
        leader: document.getElementById('security-leader-input').value
      },
      performance: {
        enabled: document.getElementById('performance-test-checkbox').checked,
        leader: document.getElementById('performance-leader-input').value
      },
      business: {
        enabled: document.getElementById('business-test-checkbox').checked,
        leader: document.getElementById('business-leader-input').value
      }
    };
    
    return testPlan;
  }
  
  // 点击模态框外部关闭
  window.onclick = function(event) {
    const modal = document.getElementById('create-schedule-modal-review');
    if (event.target === modal) {
      closeCreateScheduleModal();
    }
  }
  
  // 生成模拟的变更日志
  function generateChangeLog(changeType, changeName, changeOwner) {
    // 模拟的时间点
    const dates = [
      '2024-05-01 10:30:45',
      '2024-05-02 14:20:18',
      '2024-05-03 09:15:30',
      '2024-05-04 16:45:22',
      '2024-05-05 11:20:50'
    ];
    
    // 根据变更类型和所有者生成不同的变更描述
    let descriptions = [];
    
    if (changeType.includes('业务')) {
      descriptions = [
        '创建初始业务需求文档',
        '更新业务流程设计',
        '优化业务规则配置',
        '添加业务指标定义',
        '最终审批通过'
      ];
    } else if (changeType.includes('应用')) {
      descriptions = [
        '初始化应用架构设计',
        '添加微服务组件定义',
        '更新API接口规范',
        '优化应用集成方案',
        '完成应用部署配置'
      ];
    } else if (changeType.includes('数据')) {
      descriptions = [
        '定义数据实体模型',
        '设计数据库表结构',
        '更新数据关系映射',
        '优化数据查询性能',
        '完成数据迁移计划'
      ];
    } else if (changeType.includes('技术')) {
      descriptions = [
        '选择技术栈方案',
        '配置技术组件版本',
        '优化技术架构设计',
        '添加技术标准规范',
        '完成技术实现文档'
      ];
    } else if (changeType.includes('安全')) {
      descriptions = [
        '识别安全需求',
        '设计安全控制方案',
        '配置安全策略规则',
        '添加安全审计机制',
        '完成安全测试报告'
      ];
    } else {
      descriptions = [
        '开始变更请求',
        '更新变更内容',
        '审核变更方案',
        '执行变更实施',
        '验证变更结果'
      ];
    }
    
    // 生成唯一ID
    const generateId = () => {
      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    };
    
    // 构建完整的变更日志
    let logContent = '';
    for (let i = 0; i < Math.min(3, dates.length); i++) {
      const id = generateId();
      const date = dates[i];
      const desc = descriptions[i];
      
      logContent += `变更ID: ${id}\n`;
      logContent += `时间: ${date}\n`;
      logContent += `描述: ${desc}\n`;
      logContent += `负责人: ${changeOwner}\n`;
      logContent += '----------------------------\n\n';
    }
    
    return logContent;
  }
  
  // 显示任务详情模态对话框
  function showTaskDetail(taskName) {
    const modal = document.getElementById('taskDetailModal');
    const title = document.getElementById('taskDetailTitle');
    const stepsList = document.getElementById('taskStepsList');
    const cpcpGrid = document.getElementById('taskCpcpGrid');
    
    // 设置标题
    title.textContent = `任务详情：${taskName}`;
    
    // 获取任务详细信息
    const taskData = getTaskDetailData(taskName);
    
    // 生成步骤清单
    stepsList.innerHTML = '';
    taskData.steps.forEach((step, index) => {
      const stepItem = document.createElement('li');
      stepItem.className = 'task-step-item';
      
      // 生成CPCP标签
      const cpcpLabels = step.cpcp ? step.cpcp.map(c => {
        const labelColors = {
          'Channel': '#2196F3',
          'Product': '#4CAF50',
          'Customer': '#FF9800',
          'Partner': '#9C27B0'
        };
        const labelNames = {
          'Channel': '渠道',
          'Product': '产品',
          'Customer': '客户',
          'Partner': '合作伙伴'
        };
        return `<span class="cpcp-badge" style="background-color: ${labelColors[c]};" title="${labelNames[c]}：该步骤主要影响${labelNames[c]}方面">${c}</span>`;
      }).join('') : '';
      
      stepItem.innerHTML = `
        <div class="task-step-header">
          <div class="task-step-title">步骤 ${index + 1}：${step.name}</div>
          <div class="task-step-role">${step.role}</div>
        </div>
        ${cpcpLabels ? `<div class="task-step-cpcp">
          <span class="cpcp-label-text"><i class="fa fa-tags" style="margin-right: 4px;"></i>CPCP影响：</span>
          ${cpcpLabels}
        </div>` : ''}
        <div class="task-step-url">
          <a href="${step.url}" target="_blank">🔗 ${step.url}</a>
        </div>
      `;
      
      stepsList.appendChild(stepItem);
    });
    
    // 生成CPCP信息
    cpcpGrid.innerHTML = '';
    
    // 统计每个CPCP因素影响的步骤数量
    const cpcpStepCount = {
      'Channel': 0,
      'Product': 0,
      'Customer': 0,
      'Partner': 0
    };
    
    taskData.steps.forEach(step => {
      if (step.cpcp) {
        step.cpcp.forEach(factor => {
          if (cpcpStepCount[factor] !== undefined) {
            cpcpStepCount[factor]++;
          }
        });
      }
    });
    
    const cpcpItems = [
      { 
        label: 'Channel (渠道)', 
        value: taskData.cpcp.channel, 
        color: '#2196F3',
        stepCount: cpcpStepCount['Channel']
      },
      { 
        label: 'Product (产品)', 
        value: taskData.cpcp.product, 
        color: '#4CAF50',
        stepCount: cpcpStepCount['Product']
      },
      { 
        label: 'Customer (客户)', 
        value: taskData.cpcp.customer, 
        color: '#FF9800',
        stepCount: cpcpStepCount['Customer']
      },
      { 
        label: 'Partner (合作伙伴)', 
        value: taskData.cpcp.partner, 
        color: '#9C27B0',
        stepCount: cpcpStepCount['Partner']
      }
    ];
    
    cpcpItems.forEach(item => {
      const cpcpItem = document.createElement('div');
      cpcpItem.className = 'task-cpcp-item';
      cpcpItem.style.borderLeft = `4px solid ${item.color}`;
      cpcpItem.style.transition = 'all 0.3s ease';
      
      // 添加鼠标悬停效果
      cpcpItem.onmouseenter = function() {
        this.style.backgroundColor = item.color + '10'; // 10% 透明度
        this.style.transform = 'translateX(3px)';
      };
      cpcpItem.onmouseleave = function() {
        this.style.backgroundColor = '#f1f8ff';
        this.style.transform = 'translateX(0)';
      };
      
      cpcpItem.innerHTML = `
        <div class="task-cpcp-label" style="padding-left: 10px; display: flex; justify-content: space-between; align-items: center;">
          <span>
            <i class="fa fa-circle" style="color: ${item.color}; margin-right: 6px; font-size: 10px;"></i>
            ${item.label}
          </span>
          <span style="background: ${item.color}20; color: ${item.color}; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: bold;">
            ${item.stepCount}个步骤
          </span>
        </div>
        <div class="task-cpcp-value">${item.value}</div>
      `;
      
      cpcpGrid.appendChild(cpcpItem);
    });
    
    // 显示模态对话框
    modal.classList.add('active');
  }
  
  // 关闭任务详情模态对话框
  function closeTaskDetail() {
    const modal = document.getElementById('taskDetailModal');
    modal.classList.remove('active');
    // 重置筛选器
    const filter = document.getElementById('cpcpFilter');
    if (filter) {
      filter.value = '';
    }
  }
  
  // 根据CPCP因素筛选步骤
  function filterStepsByCpcp() {
    const filterValue = document.getElementById('cpcpFilter').value;
    const stepItems = document.querySelectorAll('.task-step-item');
    
    stepItems.forEach(stepItem => {
      if (!filterValue) {
        // 显示所有步骤
        stepItem.style.display = 'block';
        stepItem.style.opacity = '1';
      } else {
        // 检查该步骤是否包含选定的CPCP因素
        const cpcpBadges = stepItem.querySelectorAll('.cpcp-badge');
        let hasMatchingCpcp = false;
        
        cpcpBadges.forEach(badge => {
          if (badge.textContent.trim() === filterValue) {
            hasMatchingCpcp = true;
          }
        });
        
        if (hasMatchingCpcp) {
          stepItem.style.display = 'block';
          stepItem.style.opacity = '1';
          // 高亮匹配的CPCP标签
          cpcpBadges.forEach(badge => {
            if (badge.textContent.trim() === filterValue) {
              badge.style.boxShadow = '0 0 8px rgba(255, 193, 7, 0.6)';
              badge.style.transform = 'scale(1.05)';
            } else {
              badge.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.12)';
              badge.style.transform = 'scale(1)';
            }
          });
        } else {
          stepItem.style.display = 'none';
          stepItem.style.opacity = '0.5';
        }
      }
    });
    
    // 重置所有标签的样式（当显示全部时）
    if (!filterValue) {
      const allBadges = document.querySelectorAll('.cpcp-badge');
      allBadges.forEach(badge => {
        badge.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.12)';
        badge.style.transform = 'scale(1)';
      });
    }
  }
  
  // 获取任务详细数据
  function getTaskDetailData(taskName) {
    const taskDatabase = {
      '需求收集': {
        steps: [
          {
            name: '初始化需求调研计划',
            role: '需求分析师',
            url: 'http://system.demo/requirement/init',
            cpcp: ['Channel', 'Customer'] // 主要影响渠道和客户
          },
          {
            name: '识别利益相关者',
            role: '业务分析师',
            url: 'http://system.demo/stakeholder/identify',
            cpcp: ['Customer', 'Partner'] // 主要影响客户和合作伙伴
          },
          {
            name: '收集业务需求',
            role: '产品经理',
            url: 'http://system.demo/requirement/collect',
            cpcp: ['Channel', 'Product', 'Customer'] // 主要影响渠道、产品和客户
          },
          {
            name: '整理需求文档',
            role: '需求分析师',
            url: 'http://system.demo/requirement/document',
            cpcp: ['Product'] // 主要影响产品
          }
        ],
        cpcp: {
          channel: '线上门户、移动APP、线下柜台',
          product: '用户登录系统、身份认证服务',
          customer: '个人用户、企业用户、VIP客户',
          partner: '第三方认证服务商、安全服务商'
        }
      },
      '需求确认': {
        steps: [
          {
            name: '审查需求文档完整性',
            role: '项目经理',
            url: 'http://system.demo/requirement/review',
            cpcp: ['Product'] // 主要影响产品
          },
          {
            name: '与业务方确认需求',
            role: '业务分析师',
            url: 'http://system.demo/requirement/confirm',
            cpcp: ['Customer', 'Partner'] // 主要影响客户和合作伙伴
          },
          {
            name: '评估需求实现可行性',
            role: '架构师',
            url: 'http://system.demo/requirement/feasibility',
            cpcp: ['Product', 'Channel'] // 主要影响产品和渠道
          },
          {
            name: '形成最终需求规格',
            role: '需求分析师',
            url: 'http://system.demo/requirement/finalize',
            cpcp: ['Product'] // 主要影响产品
          }
        ],
        cpcp: {
          channel: '内部系统、协作平台',
          product: '需求管理系统、项目管理平台',
          customer: '内部业务方、IT部门',
          partner: '外部咨询公司、业务伙伴'
        }
      },
      '方案设计': {
        steps: [
          {
            name: '分析现有系统架构',
            role: '架构师',
            url: 'http://system.demo/architecture/analyze',
            cpcp: ['Product', 'Channel'] // 主要影响产品和渠道
          },
          {
            name: '设计技术方案',
            role: '技术专家',
            url: 'http://system.demo/solution/design',
            cpcp: ['Product', 'Partner'] // 主要影响产品和合作伙伴
          },
          {
            name: '制定实施计划',
            role: '项目经理',
            url: 'http://system.demo/implementation/plan',
            cpcp: ['Channel', 'Product', 'Customer', 'Partner'] // 影响所有方面
          },
          {
            name: '评估成本与风险',
            role: '风险管理师',
            url: 'http://system.demo/risk/assessment',
            cpcp: ['Product', 'Partner'] // 主要影响产品和合作伙伴
          }
        ],
        cpcp: {
          channel: '设计平台、协作工具',
          product: '身份认证系统、安全管理系统',
          customer: '系统用户、运维团队',
          partner: '技术供应商、安全服务商'
        }
      },
      '方案实施': {
        steps: [
          {
            name: '准备开发环境',
            role: '运维工程师',
            url: 'http://system.demo/environment/setup',
            cpcp: ['Channel', 'Partner'] // 主要影响渠道和合作伙伴
          },
          {
            name: '开发功能模块',
            role: '开发工程师',
            url: 'http://system.demo/development/module',
            cpcp: ['Product'] // 主要影响产品
          },
          {
            name: '集成测试',
            role: '测试工程师',
            url: 'http://system.demo/testing/integration',
            cpcp: ['Product', 'Channel'] // 主要影响产品和渠道
          },
          {
            name: '上线部署',
            role: '运维工程师',
            url: 'http://system.demo/deployment/production',
            cpcp: ['Channel', 'Product', 'Customer', 'Partner'] // 影响所有方面
          }
        ],
        cpcp: {
          channel: '生产环境、测试环境',
          product: '登录认证服务、安全管理模块',
          customer: '最终用户、系统管理员',
          partner: '云服务商、监控服务商'
        }
      },
      '方案评审': {
        steps: [
          {
            name: '组织评审会议',
            role: '项目经理',
            url: 'http://system.demo/review/organize',
            cpcp: ['Customer', 'Partner'] // 主要影响客户和合作伙伴
          },
          {
            name: '技术方案评审',
            role: '技本委员会',
            url: 'http://system.demo/review/technical',
            cpcp: ['Product', 'Partner'] // 主要影响产品和合作伙伴
          },
          {
            name: '安全性评估',
            role: '安全专家',
            url: 'http://system.demo/review/security',
            cpcp: ['Product', 'Customer'] // 主要影响产品和客户
          },
          {
            name: '形成评审结论',
            role: '评审委员会',
            url: 'http://system.demo/review/conclusion',
            cpcp: ['Channel', 'Product', 'Customer', 'Partner'] // 影响所有方面
          }
        ],
        cpcp: {
          channel: '会议系统、文档平台',
          product: '评审管理系统、质量管理平台',
          customer: '项目团队、业务部门',
          partner: '外部专家、咨询公司'
        }
      }
    };
    
    // 返回对应任务的数据，如果找不到则返回默认数据
    return taskDatabase[taskName] || {
      steps: [
        {
          name: '第一步：初始化任务',
          role: '项目成员',
          url: 'http://system.demo/task/init',
          cpcp: ['Product'] // 默认影响产品
        },
        {
          name: '第二步：执行操作',
          role: '执行人员',
          url: 'http://system.demo/task/execute',
          cpcp: ['Channel', 'Product'] // 影响渠道和产品
        },
        {
          name: '第三步：完成任务',
          role: '质量检查员',
          url: 'http://system.demo/task/complete',
          cpcp: ['Customer', 'Partner'] // 影响客户和合作伙伴
        }
      ],
      cpcp: {
        channel: '内部系统',
        product: '通用产品',
        customer: '内部用户',
        partner: '内部团队'
      }
    };
  }
  
  // 显示解决方案在线文档模态对话框
  function showSolutionDocumentModal() {
    const modal = document.getElementById('solutionDocModal');
    
    // 生成需求信息列表
    generateRequirementList();
    
    // 生成模型清单
    generateModelGrid();
    
    // 生成质量统计
    generateQualityStats();
    
    // 生成质量问题
    generateQualityIssues();
    
    // 生成批准人信息
    generateApproverInfo();
    
    // 显示模态对话框
    modal.classList.add('active');
  }
  
  // 关闭解决方案在线文档模态对话框
  function closeSolutionDocumentModal() {
    const modal = document.getElementById('solutionDocModal');
    modal.classList.remove('active');
  }
  
  // 生成需求信息列表
  function generateRequirementList() {
    const requirementList = document.getElementById('requirementList');
    
    const requirements = [
      {
        title: 'REQ-001: 用户登录安全优化',
        priority: '高',
        description: '实现多因素认证，提升用户登录安全性，支持SMS、邮件和移动应用多种验证方式'
      },
      {
        title: 'REQ-002: 密码策略增强',
        priority: '中',
        description: '实施更严格的密码策略，包括密码复杂度要求、定期更换和历史密码检查'
      },
      {
        title: 'REQ-003: 登录失败处理机制',
        priority: '高',
        description: '实现智能的登录失败处理，包括账户锁定、异常登录检测和安全通知'
      },
      {
        title: 'REQ-004: 单点登录集成',
        priority: '中',
        description: '与企业现有的单点登录系统集成，实现跨系统的统一身份认证'
      },
      {
        title: 'REQ-005: 性能优化需求',
        priority: '低',
        description: '优化登录响应时间，目标在高并发情况下保持在2秒内完成认证'
      }
    ];
    
    requirementList.innerHTML = '';
    requirements.forEach(req => {
      const reqItem = document.createElement('div');
      reqItem.className = 'requirement-item';
      
      reqItem.innerHTML = `
        <div class="requirement-header">
          <div class="requirement-title">${req.title}</div>
          <div class="requirement-priority">${req.priority}</div>
        </div>
        <div class="requirement-desc">${req.description}</div>
      `;
      
      requirementList.appendChild(reqItem);
    });
  }
  
  // 生成模型清单
  function generateModelGrid() {
    const modelGrid = document.getElementById('modelGrid');
    
    const models = [
      { name: '业务模型', icon: '🏢', count: '15个实体' },
      { name: '应用模型', icon: '📱', count: '8个组件' },
      { name: '数据模型', icon: '📊', count: '12个表' },
      { name: '技术模型', icon: '⚙️', count: '6个技术栈' },
      { name: '安全模型', icon: '🔒', count: '9个策略' }
    ];
    
    modelGrid.innerHTML = '';
    models.forEach(model => {
      const modelCard = document.createElement('div');
      modelCard.className = 'model-card';
      
      modelCard.innerHTML = `
        <div class="model-icon">${model.icon}</div>
        <div class="model-name">${model.name}</div>
        <div class="model-count">${model.count}</div>
      `;
      
      modelGrid.appendChild(modelCard);
    });
  }
  
  // 生成质量统计
  function generateQualityStats() {
    const qualityStats = document.getElementById('qualityStats');
    
    const stats = [
      { label: '总检查项', value: '156', type: 'total' },
      { label: '通过数', value: '143', type: 'passed' },
      { label: '未通过数', value: '13', type: 'failed' },
      { label: '通过率', value: '91.7%', type: 'rate' }
    ];
    
    qualityStats.innerHTML = '';
    stats.forEach(stat => {
      const statCard = document.createElement('div');
      statCard.className = 'quality-stat-card';
      
      statCard.innerHTML = `
        <div class="quality-stat-number ${stat.type}">${stat.value}</div>
        <div class="quality-stat-label">${stat.label}</div>
      `;
      
      qualityStats.appendChild(statCard);
    });
  }
  
  // 生成质量问题
  function generateQualityIssues() {
    const qualityIssues = document.getElementById('qualityIssues');
    
    const issues = [
      {
        title: '数据模型缺少外键约束',
        severity: '中',
        description: '用户表和权限表之间缺少必要的外键关联，可能影响数据一致性'
      },
      {
        title: 'API接口缺少错误处理',
        severity: '低',
        description: '部分API接口未实现完整的错误处理机制，建议添加统一的异常处理'
      },
      {
        title: '安全日志记录不完整',
        severity: '中',
        description: '登录失败和权限变更的安全日志记录需要补充，以满足安全合规要求'
      },
      {
        title: '性能测试结果未达标',
        severity: '高',
        description: '在高并发情况下，登录响应时间超过目标值，需要进一步优化'
      }
    ];
    
    qualityIssues.innerHTML = '';
    issues.forEach(issue => {
      const issueItem = document.createElement('div');
      issueItem.className = 'quality-issue-item';
      
      issueItem.innerHTML = `
        <div class="quality-issue-header">
          <div class="quality-issue-title">${issue.title}</div>
          <div class="quality-issue-severity">${issue.severity}</div>
        </div>
        <div class="quality-issue-desc">${issue.description}</div>
      `;
      
      qualityIssues.appendChild(issueItem);
    });
  }
  
  // 生成批准人信息
  function generateApproverInfo() {
    const approverGrid = document.getElementById('approverGrid');
    
    const approvers = [
      {
        name: '李明',
        role: '业务架构师',
        time: '2024-05-15 15:30',
        initial: '李'
      },
      {
        name: '张华',
        role: '应用架构师',
        time: '2024-05-15 15:45',
        initial: '张'
      },
      {
        name: '王芳',
        role: '数据架构师',
        time: '2024-05-15 16:00',
        initial: '王'
      },
      {
        name: '赵强',
        role: '技术架构师',
        time: '2024-05-15 16:15',
        initial: '赵'
      },
      {
        name: '陈静',
        role: '安全架构师',
        time: '2024-05-15 16:30',
        initial: '陈'
      },
      {
        name: '刘伟',
        role: '项目经理',
        time: '2024-05-15 16:45',
        initial: '刘'
      }
    ];
    
    approverGrid.innerHTML = '';
    approvers.forEach(approver => {
      const approverCard = document.createElement('div');
      approverCard.className = 'approver-card';
      
      approverCard.innerHTML = `
        <div class="approver-avatar">${approver.initial}</div>
        <div class="approver-name">${approver.name}</div>
        <div class="approver-role">${approver.role}</div>
        <div class="approver-time">${approver.time}</div>
      `;
      
      approverGrid.appendChild(approverCard);
    });
  }
  
  // 智能助手推荐功能
  function openAiRecommendationModal() {
    const modal = document.getElementById('aiRecommendationModal');
    // 初始化所有组件为选中状态
    initializeComponentSelection();
    modal.classList.add('active');
  }
  
  function closeAiRecommendationModal() {
    const modal = document.getElementById('aiRecommendationModal');
    modal.classList.remove('active');
  }
  
  // ==================== 智能体规则编辑功能 ====================
  
  // 切换规则编辑模式
  function toggleRulesEdit() {
    // 显示/隐藏编辑和显示模式
    document.getElementById('scopeDisplay').style.display = 'none';
    document.getElementById('scopeEdit').style.display = 'block';
    document.getElementById('roleDisplay').style.display = 'none';
    document.getElementById('roleEdit').style.display = 'block';
    document.getElementById('stepsDisplay').style.display = 'none';
    document.getElementById('stepsEdit').style.display = 'block';
    
    // 切换按钮显示状态
    document.getElementById('editRulesBtn').style.display = 'none';
    document.getElementById('saveRulesBtn').style.display = 'inline-flex';
    document.getElementById('cancelRulesBtn').style.display = 'inline-flex';
    
    // 添加拖拽功能到步骤列表
    initStepsDragDrop();
  }
  
  // 保存规则编辑
  function saveRulesEdit() {
    // 验证输入
    const roleCapabilities = document.querySelectorAll('.role-capability:checked');
    if (roleCapabilities.length === 0) {
      alert('⚠️ 请至少选择一个架构能力！');
      return;
    }
    
    const enabledSteps = document.querySelectorAll('#stepsList .step-item input[type="checkbox"]:checked');
    if (enabledSteps.length === 0) {
      alert('⚠️ 请至少启用一个分析步骤！');
      return;
    }
    
    // 获取编辑后的值
    const scopeLevel = document.getElementById('scopeLevel').value;
    const scopeFramework = document.getElementById('scopeFramework').value;
    
    const capabilities = [];
    roleCapabilities.forEach(cb => capabilities.push(cb.value));
    
    // 更新显示内容
    const scopeLevelText = document.getElementById('scopeLevel').selectedOptions[0].text;
    const scopeFrameworkText = scopeFramework;
    document.getElementById('scopeDisplay').innerHTML = `
      仅分析业务架构的 <strong style="color: #667eea;">${scopeLevelText}</strong>，并以 <strong style="color: #667eea;">${scopeFrameworkText}框架</strong> 为核心进行分析
    `;
    
    document.getElementById('roleDisplay').innerHTML = `
      推荐的角色需具备 <strong style="color: #764ba2;">${capabilities.length}A架构的行业知识背景</strong>（${capabilities.join('、')}）
    `;
    
    // 重建步骤显示内容
    const stepsHtml = [];
    const stepItems = document.querySelectorAll('#stepsList .step-item');
    const stepColors = ['#667eea', '#764ba2', '#667eea', '#764ba2', '#667eea'];
    let stepNum = 1;
    
    stepItems.forEach((item, index) => {
      const checkbox = item.querySelector('input[type="checkbox"]');
      if (checkbox.checked) {
        const stepText = item.querySelector('span').textContent;
        const colorClass = stepColors[index % stepColors.length];
        const stepLabel = ['\u7b2c\u4e00\u6b65', '\u7b2c\u4e8c\u6b65', '\u7b2c\u4e09\u6b65', '\u7b2c\u56db\u6b65', '\u7b2c\u4e94\u6b65', '\u7b2c\u516d\u6b65'][stepNum - 1];
        stepsHtml.push(`
          <div style="display: flex; align-items: center; margin-bottom: 6px;">
            <span style="display: inline-block; width: 6px; height: 6px; background: ${colorClass}; border-radius: 50%; margin-right: 8px;"></span>
            <span style="color: #2d3748; font-size: 13px;"><strong>${stepLabel}：</strong>${stepText}</span>
          </div>
        `);
        stepNum++;
      }
    });
    
    document.getElementById('stepsDisplay').innerHTML = `
      <p style="margin: 0 0 10px 0; color: #4a5568; font-size: 13px; line-height: 1.6;">
        必须按照清晰的顺序进行分析：
      </p>
      <div style="padding-left: 10px;">
        ${stepsHtml.join('')}
      </div>
    `;
    
    // 切换回显示模式
    document.getElementById('scopeDisplay').style.display = 'block';
    document.getElementById('scopeEdit').style.display = 'none';
    document.getElementById('roleDisplay').style.display = 'block';
    document.getElementById('roleEdit').style.display = 'none';
    document.getElementById('stepsDisplay').style.display = 'block';
    document.getElementById('stepsEdit').style.display = 'none';
    
    // 切换按钮显示状态
    document.getElementById('editRulesBtn').style.display = 'flex';
    document.getElementById('saveRulesBtn').style.display = 'none';
    document.getElementById('cancelRulesBtn').style.display = 'none';
    document.getElementById('reanalyzeBtn').style.display = 'inline-flex';
    
    // 显示保存成功提示
    showSuccessMessage('✅ 规则保存成功！可点击“重新分析”按钮应用新规则。');
  }
  
  // 取消规则编辑
  function cancelRulesEdit() {
    // 重置为默认值
    document.getElementById('scopeLevel').value = 'L4';
    document.getElementById('scopeFramework').value = 'IT4IT';
    
    // 重置角色能力选项
    document.querySelectorAll('.role-capability').forEach(cb => {
      cb.checked = true;
    });
    
    // 重置步骤选项
    const stepItems = document.querySelectorAll('#stepsList .step-item');
    stepItems.forEach((item, index) => {
      const checkbox = item.querySelector('input[type="checkbox"]');
      checkbox.checked = true;
      item.setAttribute('data-step', index + 1);
    });
    
    // 切换回显示模式
    document.getElementById('scopeDisplay').style.display = 'block';
    document.getElementById('scopeEdit').style.display = 'none';
    document.getElementById('roleDisplay').style.display = 'block';
    document.getElementById('roleEdit').style.display = 'none';
    document.getElementById('stepsDisplay').style.display = 'block';
    document.getElementById('stepsEdit').style.display = 'none';
    
    // 切换按钮显示状态
    document.getElementById('editRulesBtn').style.display = 'flex';
    document.getElementById('saveRulesBtn').style.display = 'none';
    document.getElementById('cancelRulesBtn').style.display = 'none';
  }
  
  // 重新分析
  function reanalyzeWithNewRules() {
    // 获取当前规则配置
    const scopeLevel = document.getElementById('scopeLevel').value;
    const scopeFramework = document.getElementById('scopeFramework').value;
    
    const capabilities = [];
    document.querySelectorAll('.role-capability:checked').forEach(cb => {
      capabilities.push(cb.value);
    });
    
    const analysisSteps = [];
    const stepItems = document.querySelectorAll('#stepsList .step-item');
    stepItems.forEach(item => {
      const checkbox = item.querySelector('input[type="checkbox"]');
      if (checkbox.checked) {
        analysisSteps.push(item.querySelector('span').textContent);
      }
    });
    
    const rules = {
      scope: {
        level: scopeLevel,
        framework: scopeFramework
      },
      roleCapabilities: capabilities,
      analysisSteps: analysisSteps
    };
    
    // 显示重新分析提示
    const message = `🔄 正在根据新规则重新分析...

分析范围：${scopeLevel} - ${scopeFramework}框架
角色能力：${capabilities.join('、')}
分析步骤：${analysisSteps.length}个步骤

预计分析时间：3-5秒`;
    
    if (confirm(message + '\n\n是否继续？')) {
      // 模拟重新分析过程
      showLoadingMessage('🔍 正在重新分析，请稍候...');
      
      // 模拟异步分析
      setTimeout(() => {
        console.log('重新分析规则：', rules);
        hideLoadingMessage();
        showSuccessMessage('✅ 重新分析完成！推荐组件已根据新规则更新。');
        
        // 隐藏重新分析按钮
        document.getElementById('reanalyzeBtn').style.display = 'none';
      }, 2000);
    }
  }
  
  // 初始化步骤拖拽功能
  function initStepsDragDrop() {
    const stepsList = document.getElementById('stepsList');
    let draggedElement = null;
    
    const stepItems = stepsList.querySelectorAll('.step-item');
    
    stepItems.forEach(item => {
      item.setAttribute('draggable', 'true');
      
      item.addEventListener('dragstart', function(e) {
        draggedElement = this;
        this.style.opacity = '0.4';
        e.dataTransfer.effectAllowed = 'move';
      });
      
      item.addEventListener('dragend', function() {
        this.style.opacity = '1';
      });
      
      item.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        
        if (this !== draggedElement) {
          const rect = this.getBoundingClientRect();
          const midpoint = rect.top + rect.height / 2;
          
          if (e.clientY < midpoint) {
            this.parentNode.insertBefore(draggedElement, this);
          } else {
            this.parentNode.insertBefore(draggedElement, this.nextSibling);
          }
        }
      });
    });
  }
  
  // 显示成功消息
  function showSuccessMessage(message) {
    // 创建一个临时消息框
    const messageBox = document.createElement('div');
    messageBox.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background: #10b981;
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 10000;
      animation: slideIn 0.3s ease-out;
    `;
    messageBox.textContent = message;
    document.body.appendChild(messageBox);
    
    setTimeout(() => {
      messageBox.style.animation = 'slideOut 0.3s ease-in';
      setTimeout(() => messageBox.remove(), 300);
    }, 3000);
  }
  
  // 显示加载消息
  function showLoadingMessage(message) {
    const loadingBox = document.createElement('div');
    loadingBox.id = 'loadingMessageBox';
    loadingBox.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background: #667eea;
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
    `;
    loadingBox.innerHTML = `
      <i class="fa fa-spinner fa-spin"></i>
      <span>${message}</span>
    `;
    document.body.appendChild(loadingBox);
  }
  
  // 隐藏加载消息
  function hideLoadingMessage() {
    const loadingBox = document.getElementById('loadingMessageBox');
    if (loadingBox) {
      loadingBox.remove();
    }
  }
  
  // ==================== 结束智能体规则编辑功能 ====================
  
  // 初始化组件选择状态
  function initializeComponentSelection() {
    const allComponents = document.querySelectorAll('.component-item');
    allComponents.forEach(component => {
      component.classList.add('selected');
      const checkbox = component.querySelector('.component-checkbox');
      checkbox.classList.add('checked');
    });
    updateSelectionCounts();
  }
  
  // 切换组件选择状态
  function toggleComponent(componentElement) {
    const checkbox = componentElement.querySelector('.component-checkbox');
    
    if (componentElement.classList.contains('selected')) {
      componentElement.classList.remove('selected');
      checkbox.classList.remove('checked');
    } else {
      componentElement.classList.add('selected');
      checkbox.classList.add('checked');
    }
    
    updateSelectionCounts();
  }
  
  // 全选/反选功能
  function toggleSelectAll() {
    const allComponents = document.querySelectorAll('.component-item');
    const selectAllBtn = document.getElementById('selectAllBtn');
    const selectedComponents = document.querySelectorAll('.component-item.selected');
    
    const isAllSelected = selectedComponents.length === allComponents.length;
    
    allComponents.forEach(component => {
      if (isAllSelected) {
        component.classList.remove('selected');
        component.querySelector('.component-checkbox').classList.remove('checked');
      } else {
        component.classList.add('selected');
        component.querySelector('.component-checkbox').classList.add('checked');
      }
    });
    
    selectAllBtn.textContent = isAllSelected ? '全选' : '清空';
    updateSelectionCounts();
  }
  
  // 更新选择统计
  function updateSelectionCounts() {
    const categories = {
      'business': { selector: '[data-component^="business-"]', countId: 'businessCount' },
      'application': { selector: '[data-component^="app-"]', countId: 'applicationCount' },
      'data': { selector: '[data-component^="data-"]', countId: 'dataCount' },
      'technology': { selector: '[data-component^="tech-"]', countId: 'technologyCount' },
      'security': { selector: '[data-component^="security-"]', countId: 'securityCount' }
    };
    
    let totalSelected = 0;
    let totalComponents = 0;
    
    Object.values(categories).forEach(category => {
      const components = document.querySelectorAll(category.selector);
      const selectedComponents = document.querySelectorAll(category.selector + '.selected');
      const countElement = document.getElementById(category.countId);
      
      if (countElement) {
        countElement.textContent = `${selectedComponents.length}/${components.length}`;
      }
      
      totalSelected += selectedComponents.length;
      totalComponents += components.length;
    });
    
    // 更新总计数
    const totalCountElement = document.getElementById('totalSelectionCount');
    if (totalCountElement) {
      totalCountElement.textContent = `${totalSelected}/${totalComponents}`;
    }
    
    // 更新全选按钮文本
    const selectAllBtn = document.getElementById('selectAllBtn');
    if (selectAllBtn) {
      selectAllBtn.textContent = totalSelected === totalComponents ? '清空' : '全选';
    }
  }
  
  // 接受选中的组件
  function acceptSelectedComponents() {
    const selectedComponents = document.querySelectorAll('.component-item.selected');
    
    if (selectedComponents.length === 0) {
      alert('⚠️ 请至少选择一个组件！');
      return;
    }
    
    // 收集选中的组件信息
    const selectedComponentsData = [];
    selectedComponents.forEach(component => {
      const componentId = component.getAttribute('data-component');
      const componentName = component.querySelector('.component-name').textContent;
      const componentType = component.querySelector('.component-type').textContent;
      
      selectedComponentsData.push({
        id: componentId,
        name: componentName,
        type: componentType
      });
    });
    
    // 生成接受提示信息
    const successMessage = `✅ 成功接受智能推荐

您已选择了 ${selectedComponents.length} 个架构组件：

${generateComponentSummary(selectedComponentsData)}

系统将根据这些选择自动更新架构设计文档和相关模型。

请继续在各个架构选项卡中查看详细配置。`;
    
    alert(successMessage);
    
    // 模拟提交到后端
    console.log('提交的组件数据:', selectedComponentsData);
    
    // 关闭模态框
    closeAiRecommendationModal();
  }
  
  // 生成组件摘要
  function generateComponentSummary(componentsData) {
    const categoryNames = {
      'business': '🏢 业务架构',
      'app': '📦 应用架构',
      'data': '📊 数据架构',
      'tech': '⚙️ 技术架构',
      'security': '🔒 安全架构'
    };
    
    const categorizedComponents = {};
    
    componentsData.forEach(component => {
      const category = component.id.split('-')[0];
      const categoryName = categoryNames[category] || category;
      
      if (!categorizedComponents[categoryName]) {
        categorizedComponents[categoryName] = [];
      }
      
      categorizedComponents[categoryName].push(component.name);
    });
    
    let summary = '';
    Object.entries(categorizedComponents).forEach(([category, components]) => {
      summary += `${category}: ${components.join('、')}\n`;
    });
    
    return summary;
  }
  
  // 方案评审折叠/展开功能
  function toggleCollapsibleSection(headerElement) {
    const section = headerElement.parentElement;
    const content = section.querySelector('.collapsible-content');
    const toggleIcon = section.querySelector('.toggle-icon i');
    const toggleText = section.querySelector('.collapsible-toggle span:first-child');
    
    if (content.classList.contains('collapsed')) {
      // 展开
      content.classList.remove('collapsed');
      headerElement.classList.remove('collapsed');
      toggleIcon.className = 'fa fa-chevron-up';
      toggleIcon.parentElement.classList.remove('collapsed');
      toggleText.textContent = '点击收起';
    } else {
      // 折叠
      content.classList.add('collapsed');
      headerElement.classList.add('collapsed');
      toggleIcon.className = 'fa fa-chevron-down';
      toggleIcon.parentElement.classList.add('collapsed');
      toggleText.textContent = '点击查看详情';
    }
  }
  
  // 简单的折叠/展开功能（用于单个评审部分）
  function toggleReviewSection(sectionId) {
    const content = document.getElementById(sectionId + '-content');
    const icon = document.getElementById(sectionId + '-toggle-icon');
    const button = icon.parentElement;
    
    if (content) {
      if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.className = 'fa fa-eye-slash';
        button.innerHTML = '<i class="fa fa-eye-slash" id="' + sectionId + '-toggle-icon"></i> 收起详情';
      } else {
        content.style.display = 'none';
        icon.className = 'fa fa-eye';
        button.innerHTML = '<i class="fa fa-eye" id="' + sectionId + '-toggle-icon"></i> 查看详情';
      }
    }
  }
  
  // 初始化方案评审页面时，默认折叠所有详细内容
  document.addEventListener('DOMContentLoaded', function() {
    // 为总体评审结论的内容添加ID（如果不存在）
    const overviewDiv = document.querySelector('.review-overview div[style*="display: flex"]');
    if (overviewDiv && !overviewDiv.id) {
      overviewDiv.id = 'overview-content';
    }
    
    // 默认隐藏所有评审详细内容
    const reviewSections = ['overview', 'final', 'first', 'decision', 'workload'];
    reviewSections.forEach(function(sectionId) {
      const content = document.getElementById(sectionId + '-content');
      if (content) {
        content.style.display = 'none';
      }
    });
  });
  
  // ESC键关闭模态对话框
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
      const aiModal = document.getElementById('aiRecommendationModal');
      if (aiModal.classList.contains('active')) {
        closeAiRecommendationModal();
      }
    }
  });
</script>

<!-- 任务详情模态对话框 -->
<div class="task-detail-modal" id="taskDetailModal">
    <div class="task-detail-content">
        <div class="task-detail-header">
            <div class="task-detail-title" id="taskDetailTitle">任务详情</div>
            <button class="task-detail-close" onclick="closeTaskDetail()">×</button>
        </div>
        
        <div class="task-detail-section">
            <div class="task-detail-section-title">① 详细步骤清单</div>
            <div style="background-color: #e3f2fd; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 12px; color: #1565c0; border-left: 4px solid #2196f3;">
                <i class="fa fa-info-circle" style="margin-right: 8px; color: #2196f3;"></i>
                <strong>提示：</strong>每个步骤下方的CPCP标签显示了该步骤主要影响的因素，帮助您理解每个步骤对业务的影响范围。悬停鼠标在标签上可查看详细说明。
            </div>
            
            <!-- CPCP筛选器 -->
            <div style="background-color: #f8f9fa; padding: 10px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #e9ecef;">
                <label style="font-size: 12px; color: #495057; margin-bottom: 8px; display: block; font-weight: 500;">
                    <i class="fa fa-filter" style="margin-right: 6px;"></i>按CPCP因素筛选步骤：
                </label>
                <select id="cpcpFilter" style="width: 100%; padding: 6px 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 12px; background: white;" onchange="filterStepsByCpcp()">
                    <option value="">显示所有步骤</option>
                    <option value="Channel">仅显示影响渠道(Channel)的步骤</option>
                    <option value="Product">仅显示影响产品(Product)的步骤</option>
                    <option value="Customer">仅显示影响客户(Customer)的步骤</option>
                    <option value="Partner">仅显示影响合作伙伴(Partner)的步骤</option>
                </select>
            </div>
            
            <ul class="task-steps-list" id="taskStepsList">
                <!-- 步骤内容将通过JavaScript动态生成 -->
            </ul>
        </div>
        
        <div class="task-detail-section">
            <div class="task-detail-section-title">② CPCP整体信息</div>
            <div style="background-color: #fff3e0; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 12px; color: #e65100; border-left: 4px solid #ff9800;">
                <i class="fa fa-lightbulb-o" style="margin-right: 8px; color: #ff9800;"></i>
                <strong>说明：</strong>以下为该任务涉及的所有CPCP因素的整体信息，左侧边框颜色与步骤中的标签颜色对应。悬停鼠标在卡片上可查看高亮效果。
            </div>
            <div class="task-cpcp-grid" id="taskCpcpGrid">
                <!-- CPCP信息将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
</div>

<!-- 解决方案在线文档模态对话框 -->
<div class="solution-doc-modal" id="solutionDocModal">
    <div class="solution-doc-content">
        <div class="solution-doc-header">
            <div class="solution-doc-title">在线文档（FF已归档 版本：Solution_2025_01_01_v1.0.2</div>
            <button class="solution-doc-close" onclick="closeSolutionDocumentModal()">×</button>
        </div>
        
        <div class="solution-doc-section">
            <div class="solution-doc-section-title">① 相关需求信息列表</div>
            <div class="requirement-list" id="requirementList">
                <!-- 需求信息将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <div class="solution-doc-section">
            <div class="solution-doc-section-title">② 5A架构变更模型清单</div>
            <div class="model-grid" id="modelGrid">
                <!-- 模型信息将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <div class="solution-doc-section">
            <div class="solution-doc-section-title">③ 模型质量检查统计</div>
            <div class="quality-stats" id="qualityStats">
                <!-- 质量统计将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <div class="solution-doc-section">
            <div class="solution-doc-section-title">④ 遗留质量问题清单</div>
            <div class="quality-issues" id="qualityIssues">
                <!-- 质量问题将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <div class="solution-doc-section">
            <div class="solution-doc-section-title">⑤ 批准人信息</div>
            <div class="approver-grid" id="approverGrid">
                <!-- 批准人信息将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
</div>

<!-- 智能助手推荐模态对话框 -->
<div class="ai-recommendation-modal" id="aiRecommendationModal">
    <div class="ai-recommendation-content">
        <div class="ai-recommendation-header">
            <div class="ai-recommendation-title">
                <i class="fa fa-robot"></i>
                智能助手推荐（解决方案智能体）
            </div>
            <button class="ai-recommendation-close" onclick="closeAiRecommendationModal()">×</button>
        </div>
        
        <div class="ai-info-banner">
            <i class="fa fa-info-circle ai-info-icon"></i>
            <div class="ai-info-text">
                基于当前需求信息和系统环境，智能助手为您推荐以下5A架构组件。请您仔细阅读并选择需要的组件，只有被选中的组件才会被提交到后端。
            </div>
        </div>
        
        <!-- 智能体分析规则 -->
        <div class="ai-analysis-rules" id="aiAnalysisRules" style="margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
                <div style="display: flex; align-items: center;">
                    <i class="fa fa-lightbulb-o" style="font-size: 24px; color: #fff; margin-right: 12px;"></i>
                    <h3 style="margin: 0; color: #fff; font-size: 18px; font-weight: 600;">智能体分析规则</h3>
                </div>
                <div>
                    <button id="editRulesBtn" onclick="toggleRulesEdit()" style="background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: flex; align-items: center; gap: 6px;" onmouseover="this.style.background='rgba(255, 255, 255, 0.3)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'">
                        <i class="fa fa-edit"></i>
                        <span>编辑规则</span>
                    </button>
                    <button id="saveRulesBtn" onclick="saveRulesEdit()" style="display: none; background: #fff; color: #667eea; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; margin-right: 8px;" onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fff'">
                        <i class="fa fa-save"></i>
                        <span>保存</span>
                    </button>
                    <button id="cancelRulesBtn" onclick="cancelRulesEdit()" style="display: none; background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s;" onmouseover="this.style.background='rgba(255, 255, 255, 0.3)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'">
                        <i class="fa fa-times"></i>
                        <span>取消</span>
                    </button>
                    <button id="reanalyzeBtn" onclick="reanalyzeWithNewRules()" style="display: none; background: #10b981; color: #fff; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; margin-left: 8px; transition: all 0.3s;" onmouseover="this.style.background='#059669'" onmouseout="this.style.background='#10b981'">
                        <i class="fa fa-refresh"></i>
                        <span>重新分析</span>
                    </button>
                </div>
            </div>
            
            <div style="background: rgba(255, 255, 255, 0.95); padding: 18px; border-radius: 8px;">
                <!-- 分析范围限定 -->
                <div style="margin-bottom: 16px;">
                    <div style="display: flex; align-items: start; margin-bottom: 8px;">
                        <span style="display: inline-block; width: 24px; height: 24px; background: #667eea; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">a</span>
                        <div style="flex: 1;">
                            <h4 style="margin: 0 0 6px 0; color: #2d3748; font-size: 15px; font-weight: 600;">分析范围限定</h4>
                            <!-- 显示模式 -->
                            <p id="scopeDisplay" style="margin: 0; color: #4a5568; font-size: 13px; line-height: 1.6;">
                                仅分析业务架构的 <strong style="color: #667eea;">L4任务层</strong>，并以 <strong style="color: #667eea;">IT4IT框架</strong> 为核心进行分析
                            </p>
                            <!-- 编辑模式 -->
                            <div id="scopeEdit" style="display: none;">
                                <div style="margin-bottom: 8px;">
                                    <label style="display: block; color: #4a5568; font-size: 12px; margin-bottom: 4px;">业务架构层级：</label>
                                    <select id="scopeLevel" style="width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #2d3748;">
                                        <option value="L1">L1 - 业务领域层</option>
                                        <option value="L2">L2 - 价值流层</option>
                                        <option value="L3">L3 - 活动层</option>
                                        <option value="L4" selected>L4 - 任务层</option>
                                        <option value="L5">L5 - 步骤层</option>
                                    </select>
                                </div>
                                <div>
                                    <label style="display: block; color: #4a5568; font-size: 12px; margin-bottom: 4px;">分析框架：</label>
                                    <select id="scopeFramework" style="width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #2d3748;">
                                        <option value="IT4IT" selected>IT4IT框架</option>
                                        <option value="TOGAF">TOGAF框架</option>
                                        <option value="ArchiMate">ArchiMate框架</option>
                                        <option value="Zachman">Zachman框架</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 角色能力要求 -->
                <div style="margin-bottom: 16px;">
                    <div style="display: flex; align-items: start; margin-bottom: 8px;">
                        <span style="display: inline-block; width: 24px; height: 24px; background: #764ba2; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">b</span>
                        <div style="flex: 1;">
                            <h4 style="margin: 0 0 6px 0; color: #2d3748; font-size: 15px; font-weight: 600;">角色能力要求</h4>
                            <!-- 显示模式 -->
                            <p id="roleDisplay" style="margin: 0; color: #4a5568; font-size: 13px; line-height: 1.6;">
                                推荐的角色需具备 <strong style="color: #764ba2;">5A架构的行业知识背景</strong>（业务架构、应用架构、数据架构、技术架构、安全架构）
                            </p>
                            <!-- 编辑模式 -->
                            <div id="roleEdit" style="display: none;">
                                <label style="display: block; color: #4a5568; font-size: 12px; margin-bottom: 6px;">选择必需的架构能力（可多选）：</label>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                    <label style="display: flex; align-items: center; padding: 6px 12px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 13px;">
                                        <input type="checkbox" class="role-capability" value="业务架构" checked style="margin-right: 6px;">
                                        <span>业务架构</span>
                                    </label>
                                    <label style="display: flex; align-items: center; padding: 6px 12px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 13px;">
                                        <input type="checkbox" class="role-capability" value="应用架构" checked style="margin-right: 6px;">
                                        <span>应用架构</span>
                                    </label>
                                    <label style="display: flex; align-items: center; padding: 6px 12px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 13px;">
                                        <input type="checkbox" class="role-capability" value="数据架构" checked style="margin-right: 6px;">
                                        <span>数据架构</span>
                                    </label>
                                    <label style="display: flex; align-items: center; padding: 6px 12px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 13px;">
                                        <input type="checkbox" class="role-capability" value="技术架构" checked style="margin-right: 6px;">
                                        <span>技术架构</span>
                                    </label>
                                    <label style="display: flex; align-items: center; padding: 6px 12px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 13px;">
                                        <input type="checkbox" class="role-capability" value="安全架构" checked style="margin-right: 6px;">
                                        <span>安全架构</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分析步骤要求 -->
                <div>
                    <div style="display: flex; align-items: start;">
                        <span style="display: inline-block; width: 24px; height: 24px; background: #667eea; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">c</span>
                        <div style="flex: 1;">
                            <h4 style="margin: 0 0 8px 0; color: #2d3748; font-size: 15px; font-weight: 600;">分析步骤要求</h4>
                            <!-- 显示模式 -->
                            <div id="stepsDisplay">
                                <p style="margin: 0 0 10px 0; color: #4a5568; font-size: 13px; line-height: 1.6;">
                                    必须按照清晰的顺序进行分析：
                                </p>
                                <div style="padding-left: 10px;">
                                    <div style="display: flex; align-items: center; margin-bottom: 6px;">
                                        <span style="display: inline-block; width: 6px; height: 6px; background: #667eea; border-radius: 50%; margin-right: 8px;"></span>
                                        <span style="color: #2d3748; font-size: 13px;"><strong>第一步：</strong>分析需求内容</span>
                                    </div>
                                    <div style="display: flex; align-items: center; margin-bottom: 6px;">
                                        <span style="display: inline-block; width: 6px; height: 6px; background: #764ba2; border-radius: 50%; margin-right: 8px;"></span>
                                        <span style="color: #2d3748; font-size: 13px;"><strong>第二步：</strong>分析业务架构的流程模型</span>
                                    </div>
                                    <div style="display: flex; align-items: center; margin-bottom: 6px;">
                                        <span style="display: inline-block; width: 6px; height: 6px; background: #667eea; border-radius: 50%; margin-right: 8px;"></span>
                                        <span style="color: #2d3748; font-size: 13px;"><strong>第三步：</strong>分析数据模型</span>
                                    </div>
                                    <div style="display: flex; align-items: center; margin-bottom: 6px;">
                                        <span style="display: inline-block; width: 6px; height: 6px; background: #764ba2; border-radius: 50%; margin-right: 8px;"></span>
                                        <span style="color: #2d3748; font-size: 13px;"><strong>第四步：</strong>分析产品模型</span>
                                    </div>
                                    <div style="display: flex; align-items: center;">
                                        <span style="display: inline-block; width: 6px; height: 6px; background: #667eea; border-radius: 50%; margin-right: 8px;"></span>
                                        <span style="color: #2d3748; font-size: 13px;"><strong>第五步：</strong>分析业务组件及业务实体关联</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 编辑模式 -->
                            <div id="stepsEdit" style="display: none;">
                                <p style="margin: 0 0 10px 0; color: #4a5568; font-size: 13px; line-height: 1.6;">
                                    拖拽调整分析步骤顺序，或取消勾选跳过某步骤：
                                </p>
                                <div id="stepsList" style="padding-left: 10px;">
                                    <div class="step-item" data-step="1" style="display: flex; align-items: center; margin-bottom: 8px; padding: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; cursor: move;">
                                        <input type="checkbox" checked style="margin-right: 8px;">
                                        <i class="fa fa-bars" style="color: #9ca3af; margin-right: 8px; cursor: move;"></i>
                                        <span style="color: #2d3748; font-size: 13px; flex: 1;">分析需求内容</span>
                                    </div>
                                    <div class="step-item" data-step="2" style="display: flex; align-items: center; margin-bottom: 8px; padding: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; cursor: move;">
                                        <input type="checkbox" checked style="margin-right: 8px;">
                                        <i class="fa fa-bars" style="color: #9ca3af; margin-right: 8px; cursor: move;"></i>
                                        <span style="color: #2d3748; font-size: 13px; flex: 1;">分析业务架构的流程模型</span>
                                    </div>
                                    <div class="step-item" data-step="3" style="display: flex; align-items: center; margin-bottom: 8px; padding: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; cursor: move;">
                                        <input type="checkbox" checked style="margin-right: 8px;">
                                        <i class="fa fa-bars" style="color: #9ca3af; margin-right: 8px; cursor: move;"></i>
                                        <span style="color: #2d3748; font-size: 13px; flex: 1;">分析数据模型</span>
                                    </div>
                                    <div class="step-item" data-step="4" style="display: flex; align-items: center; margin-bottom: 8px; padding: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; cursor: move;">
                                        <input type="checkbox" checked style="margin-right: 8px;">
                                        <i class="fa fa-bars" style="color: #9ca3af; margin-right: 8px; cursor: move;"></i>
                                        <span style="color: #2d3748; font-size: 13px; flex: 1;">分析产品模型</span>
                                    </div>
                                    <div class="step-item" data-step="5" style="display: flex; align-items: center; padding: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; cursor: move;">
                                        <input type="checkbox" checked style="margin-right: 8px;">
                                        <i class="fa fa-bars" style="color: #9ca3af; margin-right: 8px; cursor: move;"></i>
                                        <span style="color: #2d3748; font-size: 13px; flex: 1;">分析业务组件及业务实体关联</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 选择统计信息 -->
        <div class="architecture-summary">
            <div class="summary-title">
                <i class="fa fa-chart-bar"></i>
                组件选择统计：
                <span class="selection-count" id="totalSelectionCount">0/0</span>
                <button class="select-all-btn" onclick="toggleSelectAll()" id="selectAllBtn">全选</button>
            </div>
        </div>
        
        <div class="architecture-grid">
            <!-- 业务架构建议 -->
            <div class="architecture-card">
                <div class="architecture-card-header">
                    <div class="architecture-icon business-icon">
                        <i class="fa fa-building"></i>
                    </div>
                    <div class="architecture-card-title">业务架构 <span class="selection-count" id="businessCount">0/5</span></div>
                </div>
                <div class="component-selection-grid">
                    <div class="component-item" data-component="business-activity-compliance" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">活动-合规检查</div>
                            <div class="component-type">业务活动</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="business-task-approval" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">任务-审批合归报告</div>
                            <div class="component-type">业务任务</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="business-process-auth" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">流程-身份认证</div>
                            <div class="component-type">业务流程</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="business-service-sso" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">服务-单点登录</div>
                            <div class="component-type">业务服务</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="business-role-rbac" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">角色-RBAC权限管理</div>
                            <div class="component-type">业务角色</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 应用架构建议 -->
            <div class="architecture-card">
                <div class="architecture-card-header">
                    <div class="architecture-icon application-icon">
                        <i class="fa fa-cubes"></i>
                    </div>
                    <div class="architecture-card-title">应用架构 <span class="selection-count" id="applicationCount">0/6</span></div>
                </div>
                <div class="component-selection-grid">
                    <div class="component-item" data-component="app-microservice-auth" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">微服务组件-认证服务</div>
                            <div class="component-type">微服务</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="app-microservice-gateway" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">微服务组件-API网关</div>
                            <div class="component-type">微服务</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="app-integration-platform" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">集成平台-ESB总线</div>
                            <div class="component-type">集成平台</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="app-frontend-react" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">前端框架-React组件</div>
                            <div class="component-type">前端应用</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="app-cache-redis" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">缓存组件-Redis集群</div>
                            <div class="component-type">缓存服务</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="app-monitor-system" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">监控组件-日志系统</div>
                            <div class="component-type">监控服务</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据架构建议 -->
            <div class="architecture-card">
                <div class="architecture-card-header">
                    <div class="architecture-icon data-icon">
                        <i class="fa fa-database"></i>
                    </div>
                    <div class="architecture-card-title">数据架构 <span class="selection-count" id="dataCount">0/5</span></div>
                </div>
                <div class="component-selection-grid">
                    <div class="component-item" data-component="data-database-mysql" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">数据库-MySQL集群</div>
                            <div class="component-type">关系数据库</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="data-warehouse-hadoop" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">数据仓库-Hadoop平台</div>
                            <div class="component-type">数据仓库</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="data-model-unified" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">数据模型-统一主数据</div>
                            <div class="component-type">数据模型</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="data-encryption-aes" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">加密组件-AES256算法</div>
                            <div class="component-type">数据加密</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="data-backup-system" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">备份组件-自动备份系统</div>
                            <div class="component-type">数据备份</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 技术架构建议 -->
            <div class="architecture-card">
                <div class="architecture-card-header">
                    <div class="architecture-icon technology-icon">
                        <i class="fa fa-cogs"></i>
                    </div>
                    <div class="architecture-card-title">技术架构 <span class="selection-count" id="technologyCount">0/6</span></div>
                </div>
                <div class="component-selection-grid">
                    <div class="component-item" data-component="tech-server-linux" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">服务器-Linux集群</div>
                            <div class="component-type">操作系统</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="tech-middleware-tomcat" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">中间件-Tomcat容器</div>
                            <div class="component-type">应用服务器</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="tech-container-docker" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">容器化-Docker+K8s</div>
                            <div class="component-type">容器技术</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="tech-loadbalancer-nginx" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">负载均衡-Nginx代理</div>
                            <div class="component-type">网络设备</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="tech-monitor-prometheus" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">监控系统-Prometheus</div>
                            <div class="component-type">监控工具</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="tech-cicd-jenkins" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">CI/CD-Jenkins流水线</div>
                            <div class="component-type">部署工具</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 安全架构建议 -->
            <div class="architecture-card">
                <div class="architecture-card-header">
                    <div class="architecture-icon security-icon">
                        <i class="fa fa-shield-alt"></i>
                    </div>
                    <div class="architecture-card-title">安全架构 <span class="selection-count" id="securityCount">0/5</span></div>
                </div>
                <div class="component-selection-grid">
                    <div class="component-item" data-component="security-auth-mfa" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">认证模块-多因子认证</div>
                            <div class="component-type">身份认证</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="security-encryption-ssl" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">加密组件-SSL/TLS协议</div>
                            <div class="component-type">通信加密</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="security-firewall-waf" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">防火墙-WAF应用防火墙</div>
                            <div class="component-type">网络安全</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="security-audit-log" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">审计组件-安全日志系统</div>
                            <div class="component-type">安全审计</div>
                        </div>
                    </div>
                    <div class="component-item" data-component="security-access-control" onclick="toggleComponent(this)">
                        <div class="component-checkbox"></div>
                        <div class="component-info">
                            <div class="component-name">访问控制-ACL网络策略</div>
                            <div class="component-type">访问控制</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="ai-recommendation-actions">
            <button class="ai-action-btn ai-accept-btn" onclick="acceptSelectedComponents()">
                <i class="fa fa-check"></i>
                接受选中组件
            </button>
            <button class="ai-action-btn ai-reject-btn" onclick="closeAiRecommendationModal()">
                <i class="fa fa-times"></i>
                取消
            </button>
        </div>
    </div>
</div>

</body>
</html>